CODEWITHSUNDEEP
javascripthtmlraphael
Andrei Oniga
Andrei Oniga

Reputation: 8559

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

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...

Upvotes: 4

Views: 1617

Answers (2)

Andrei Oniga
Andrei Oniga

Reputation: 8559

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.

Upvotes: 6

Matt Esch
Matt Esch

Reputation: 22956

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

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

Paper.renderfix()

Fixes the issue of Firefox and IE9 regarding subpixel rendering. If paper is dependant on other elements after reflow it could shift half pixel which cause for lines to lost their crispness. This method fixes the issue.

Upvotes: 1

Related Questions