We Keep Coding

Prepand an image element with jQuery makes it appear with different height than the parent and the SVG element

The problem with the code below is that the image's height (#age-hover-img) is not contained inside the parent div's height. So the SVG appears correctly but on hover, the image appears a bit higher than the SVG. As a result, the hover effect transition does not appear as smooth as it should be.
<div class="info-box-icon first-age">
<div class="info-svg-wrapper info-icon" style="width: 152px;height: 373px;">
<img id="age-hover-img" src="../imgs/test.svg">
<svg xmlns="http://www.w3.org/2000/svg" id="svg-1581" data-name="svg-dis" width="152.482" height="372.791" viewBox="0 0 152.482 372.791">..</svg>
</div>
</div>
CSS for the img element:
#age-hover-img
{
position: absolute;
top: 0;
bottom: 0;
object-fit: cover;
opacity: 0;
transition: opacity .3s ease-in;
width:100%;
height:auto;
}
The SVG (.info-svg-wrapper svg) has the width and height set to inherit, in order to avoid any conflicts.
I prepend the image using jQuery as sawn below.
$('.first-age .info-icon').prepend('<img id="age-hover-img" src="../imgs/test.svg" />');
I have also tried to add width:100% and height:100% at the .info-svg-wrapper, but this did not fix the problem.
Can the image on hover and the SVG, be at the same height, so I can have a smooth transition on hover?

I want to put a scrollbar to my svg image so that it occupies only specific area on my webpage

I have a svg file which occupies almost the entire HTML Page. Instead i wish to put a scrollbar and give it only a specific space so that I can place other elements in the page. But it cuts off my image maybe because it has elements which have co-ordinates that don't fit inside the give space and the scrollbar also doesn't show up.
How to get ScrollBars in SVG?
Add scrollbar to svg container
Option 1 that I tried :
<svg viewbox = "0 0 825 1275" xmlns="http://www.w3.org/2000/svg" style="overflow-x: scroll; overflow-y: scroll;">
<line stroke ="black" x1 = "787.5" y1 = "412.5" x2 = "712.5" y2 = "37.5" nodeIndex="1"></line><text text-anchor = "middle" dominant-baseline = "central" x = "758" y = "217" >a6</text><line stroke ="black" x1 = "787.5" y1 = "412.5" x2 = "712.5" y2 = "787.5" nodeIndex="1"></line>
...
...
...
Option 2 that I tried :
<div class="container">
<Object type="image/svg+xml" id="mySVG" data="svg/glycan-114.svg">
Your browser does not support SVG
</Object>
</div>
CSS:
#container{
height: 400px;
width: 400px;
overflow: scroll;
}
#mySVG {
width :100px;
height:1000px;
position: relative;
overflow: scroll;
}

Try wrapping the <svg></svg>in a <div> and applying an overflow scrollbar on the <div>:
<div class="container">
<svg>
<line></line>
<text></text>
<line></line>
</svg>
</div>
.container {
width: 200px;
height: 200px;
overflow: scroll;
}
Any portion of the <svg> that doesn't fit within the container area can be accessed using the scrollbar.
If you also require the <svg> to fully contain within the container area, you might want to play around with SVG transformations like scaling down the SVG.
Please refer to the following jsfiddle example.

Resample jpeg in svg <image> tag after scaling the svg container

Is there any way to resample a raster picture inside an <image> tag that itself is inside a <svg> container after I scale (transform) the container?
I have a 640x640px jpeg. It looks like this on the page (it's a popup on a map that enlarges on hover).
<svg class="photo" style="top: 425px; left: 1406px;">
<image width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../images/someimg.jpg"></image>
</svg>
css:
.photo {
position: absolute;
width: 54px;
height: 54px;
transform-origin: 50% 119%;
box-shadow: 5px 5px 3px #999;
overflow: visible;
cursor: pointer;
}
.photo image {
clip-path: url(#clipper);
}
clipped by
<svg>
<defs>
<clipPath id="clipper">
<polygon points="0,0 56,0 56,56 36,56 28,64 20,56 0,56 0,0"/>
</clipPath>
</defs>
</svg>
Previously I tried css scaling:
photo:hover {
transform: scale(2.5);
}
it worked great: the <image> inside looked sharp after the transform, but hover itself looked ugly when interrupted. So I tried to do it with d3.transition()
$photoSvg.on('mouseover', function() {
d3.select(this).transition()
.duration(400)
.style('transform', 'scale(2.5)');
})
.on('mouseout', function() {
d3.select(this).transition()
.duration(400)
.style('transform', 'scale(1)');
});
There is a strange effect now. When I first hover after the page reload there is no transition but the svg scales and the <image> looks kind of sharp. But on consecutive transitions I see the animation but the image is sharp only when it is small. When it is scaled 2.5 times it looks just like a stretched image from scale(1).
Any light shed would be much appreciated.
Thanks.

Fabric js canvas border affects mouse offset

Using Fabric JS, I have a 100px border as an inline style for my canvas
<canvas id='c' style = 'border: solid red 100px;'></canvas>
This is causing issues with selecting objects as the mouse position seems to be offset by the border width
FIDDLE
I have tried to fix the issue using
obj.setCoords();
and
canvas.calcOffset();
with no joy?..

Try jsFiddle. FabricJs generates 2 canvases and they are not placed coreectly inside .canvas-container class
#c{
border: 100px solid #AAA;
}
.upper-canvas{
top: 100px !important;
left: 100px !important;
}

mouse events on overlapping SVG elements

How to handle click events on overlapping svg elements? I am using Reaphael.js library.
Problem is that top <svg> DOM element is intercepting mouse event, even if bottom element is not overlapped by any drawing. My question is how to make both circles in my example clickable and still keep them in two svg elemnts?
Here is my code:
CSS:
#container {
position: relative;
width: 200px;
height: 200px
}
#container>svg {
position: absolute !important;
top: 0;
left: 0;
}
JavaScript:
var topLayer = Raphael('container', 200, 200);
var bottomLayer = Raphael('container', 200, 200);
topLayer.circle(100, 100, 50)
.attr({
fill: 'red',
stroke: false
})
.mousedown(function(){alert('Top layer')});
bottomLayer.circle(120, 120, 50)
.attr({
fill: 'pink',
stroke: false
})
.mousedown(function(){alert('Bottom layer')});
Working JSFiddle example
PS: I know that I can achieve layering in single <svg> DOM elemnt, but this is not a case. My bottom SVG element have zoom and pan capabilities, while top SVG element should be static.

You can manipulate css property called pointer-events by setting it to none. This will result in allowing all events flowing through the layer that is marked with pointer-events:none.
You can see this fiddle: https://jsfiddle.net/krul/6SmQ9/2/
#container {
pointer-events:none;
position: relative;
width: 200px;
height: 200px
}
#container>svg {
pointer-events:none;
position: absolute !important;
top: 0;
left: 0;
}
svg circle {
pointer-events:visible;
}