Raphael.js：为什么SVG向左偏移了-0.5像素？

Question

我正在工作的Web应用程序中有一个功能，允许用Raphael.js库将DIV内的图像替换为完全相同的SVG。

以下是包含图像的HTML元素示例：

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

当调用名为addSVG()的方法时，图像父级div被设置为Raphael对象paper，并且在原始图像隐藏后，将包含添加图像的SVG添加到其中：

            // 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 {

                }
            }

几乎所有东西都很完美，除了svg的定位稍微向左偏移了0.5像素（这显然很烦人）。下面是操作后生成的HTML代码：

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

为什么会添加-0.5像素，我该如何避免这种情况发生？ 顺便说一下，我试着调整了浏览器窗口大小，这时候就不再添加-0.5像素了...

- Andrei Oniga

---

似乎在Chrome中无法重现，请参见http://jsfiddle.net/Xe88g/33/。 - Qnan

在你的HTML中，任何父元素的偏移量是否会是相对计算的结果 - 即margin-left: 10%？我听说过这种情况发生，其中父元素从其环境继承分数偏移量。另外：您是否尝试在创建Raphael的paper元素后显式修改它，将style:left设置为0？ - Kevin Nielsen

不，SVG在其父DOM元素中的位置是绝对的。使用CSS显式地为SVG设置样式（top和left = 0）也是我找到的解决问题的方法。 - Andrei Oniga

Answer 1

我发现解决这个问题的唯一方法是通过CSS显式地将SVG的top和left属性设置为0，并将CSS规则标记为!important。

svg {
   top: 0 !important;
   left: 0 !important;
}

然而，这个问题的原因对我来说仍然是未知的。如果有人知道答案，请与我们分享。

- Andrei Oniga

Answer 2

您需要调用Paper.renderfix()来解决IE9和Firefox中的此问题。

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

Paper.renderfix() 修复Firefox和IE9关于子像素渲染的问题。如果在重排后，paper依赖于其他元素，则可能会移动半个像素，导致线条失去清晰度。该方法可解决此问题。

- Matt Esch