0

外部svgをロードするhtmlオブジェクトタイプを動的に作成してから、それをドキュメントにappendChildしています。（私はそれが重要だとは思わないが、キャンバス領域にあることに注意する）。それはすべてうまくいきます。

左または上を変更するか、オブジェクトを単に removeChild すると、高さと幅の元の svg 領域にブラック ボックスが残ります。新しい場所でレンダリングする svg を移動すると、元の場所にブラック ボックスが残るだけです。

これはクロムでのみ発生します。(Firefox にはブラック ボックスはありません)。Chrome ドキュメントのいくつかを読んでいると、過去に Webkit の問題に対処してブラック ボックスを残していることがわかりました。

svg ファイルで、ビューポートを使用するか使用しない場合、同じバグが発生します

誰もこれを前に見ましたか？回避策はありますか？(画像ではなく、オブジェクトを使用する必要があります)

SVGの作成の一部...

var object2 = document.createElement("object");
object2.setAttribute("type", "image/svg+xml");
object2.setAttribute("data", "bitmaps/whirl.svg");
object2.className += " roomObj3";
object2.style.left=''+(xxx+8)+'px';
object2.style.top=''+(18)+'px';
object2.id="tornado"+xx;
document.getElementById('objLayer').appendChild(object2);

ブラックボックスの後ろに葉を移動します（ただし、正しく移動します）...

var id2="tornado"+xx;
ele=document.getElementById(id2);
var xpos=parseInt(ele.style.left);
ele.style.left=""+(xpos+100)+"px";

.roomObj3 {
position:absolute;
z-index:1;
}
4

1 に答える 1

1

Chrome に GPU の使用を強制してみてください:

.roomObj3 {
  position:absolute;
  z-index:1;
  -webkit-backface-visibility: hidden;
}
于 2013-01-31T22:57:57.493 に答える