Question

我正在动态创建一个加载外部svg的html对象类型，然后将它附加到文档中。（我会注意到它在画布区域，虽然我不认为这很重要）。一切正常。

当我修改左边或顶部，或者只是删除对象时，它会在原始svg区域的高度和宽度上留下一个黑框。如果我正在移动svg，它会在新位置渲染得很好，只是它会在原来的位置留下一个黑盒子。

这只发生在chrome中。（在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;
}

Answer 1

尝试强制Chrome使用GPU：

.roomObj3 {
  position:absolute;
  z-index:1;
  -webkit-backface-visibility: hidden;
}

当移动或移除对象时，svg chrome bug会留下黑盒子

1 个答案: