Raphael.js: Why is SVG positioned -0.5px to the left?

Question

The web application feature I'm working on allows me to replace an image inside a DIV with an exact copy as an SVG. This is done using the Raphael.js library.

The following 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 a method called addSVG() called, the parent of the div image is set as a Raphael paper object, 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, except for svg positioning, which is -0.5px to the left (and this, of course, is annoyingly visible, of course). The following is the HTML received 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 this -0.5px added and how can I prevent it? By the way, I resized the browser window as an experiment, and that -0.5px was no longer added ...

Answer 1

The only solution I 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 cause of the problem is still unknown to me, so if anyone has an answer, please share it with us.

Answer 2

You need to call Paper.renderfix () to fix this problem in IE9 and Firefox.

http://raphaeljs.com/reference.html#Paper.renderfix

Paper.renderfix ()

Fixes a Firefox and IE9 issue regarding subpixel rendering. If the paper depends on other elements after remelting, it can shift half the pixel, which causes the lines to lose their sharpness. This method fixes the problem.