4

我正在开发的 Web 应用程序的一项功能允许将 DIV 内的图像替换为 SVG 的精确副本。这是使用 Raphael.js 库完成的。

Bellow 是这样一个包含图像的 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.5px （当然，这很烦人）。下面是操作后生成的 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.5px 以及如何防止它发生？顺便说一句，作为实验，我调整了浏览器窗口的大小，并且不再添加 -0.5px ......

4

2 回答 2

5

我发现解决此问题的唯一解决方案是将 SVG 的top和left属性（使用 CSS）显式设置为 0，并将 CSS 规则标记为!important.

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

但是，我仍然不知道问题的原因，所以如果有人有答案，请与我们分享。

于 2012-11-01T13:58:04.270 回答
1

您需要调用 Paper.renderfix() 以在 IE9 和 Firefox 中修复此问题。

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

Paper.renderfix()

修复了 Firefox 和 IE9 关于亚像素渲染的问题。如果纸张在回流后依赖于其他元素，它可能会移动半个像素，从而导致线条失去清晰度。此方法解决了该问题。

于 2012-10-31T23:40:58.140 回答