A feature of the web app I'm working on allows the replacement of an image inside a DIV with an exact replica as an SVG. This is done using the Raphael.js library.
Bellow is an example of such an HTML element containing an image:
<div id="ow-0" reference="0" class="object-wrapper" style="z-index: 3; width: 231px; left: 116px; top: 217px; outline: rgb(0, 0, 0) solid 1px; ">
<img id="o-0" reference="0" class="object image" src="image-gallery/intermediate/3295094303_2b50e5fe03_z.jpg" />
</div>
When calling a method named addSVG(), the image parent div is set as the Raphael object paper, and the SVG with the image added to it, after the original image is hidden:
// Create the SVG and add it to the Viewport
this.addSVG = function(){
// Hide the HTML element before replacing it with the SVG
$("#o-"+this.ref).hide();
// Create the "paper" (svg canvas) before embedding the actual SVG
this.canvas = new Raphael(document.getElementById("ow-"+this.ref), this.width, this.height);
if (this.type=="image" || this.type=="QR"){
this.svg = this.canvas.image(this.src,0,0,this.width,this.height);
}
else {
}
}
Almost everything is perfect, with the exception of the positioning of the svg, which is -0.5px to the left (and this is annoyingly visible, of course). Bellow is the HTML code resulting after the operation:
<div id="ow-0" reference="0" class="object-wrapper" style="z-index: 3; width: 231px; left: 116px; top: 217px; outline: rgb(0, 0, 0) solid 1px; ">
<svg style="overflow: hidden; position: relative; left: -0.5px; " height="170" version="1.1" width="231" xmlns="http://www.w3.org/2000/svg">
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); ">Created with Raphaël 2.1.0</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); "></defs>
<image style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " x="0" y="0" width="231" height="170" preserveAspectRatio="none" xlink:href="image-gallery/intermediate/3295094303_2b50e5fe03_z.jpg"></image>
</svg>
<img id="o-0" reference="0" class="object image" src="image-gallery/intermediate/3295094303_2b50e5fe03_z.jpg" style="display: none; ">
</div>
Why is that -0.5px added and how can I prevent it from happening? By the way, I resized the browser window, as an experiment, and that -0.5px was no longer added...
The only solution I have found to solve this problem is to explicitly set the top and left attributes (using CSS) of the SVG to 0, and mark the CSS rules as !important.
svg {
top: 0 !important;
left: 0 !important;
}
However, the reason of the problem is still unknown to me so if anyone has an answer, please share it with us.