4

私が取り組んでいるWebアプリの機能を使用すると、DIV内の画像をSVGとしての正確なレプリカに置き換えることができます。これは、Raphael.jsライブラリを使用して行われます。

以下は、画像を含むそのような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 {

                }
            }

左に-0.5pxである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; ">
        <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

IE9 と Firefox でこの問題を修正するには、Paper.renderfix() を呼び出す必要があります。

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

Paper.renderfix()

サブピクセル レンダリングに関する Firefox および IE9 の問題を修正します。リフロー後に紙が他の要素に依存している場合、半ピクセルがずれて、線の鮮明さが失われる可能性があります。この方法で問題が解決します。

于 2012-10-31T23:40:58.140 に答える