0

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

当我修改左侧或顶部，或者只是删除对象时，它会在其高度和宽度的原始 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;
}
4

1 回答 1

1

尝试强制 Chrome 使用 GPU：

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