IE9和x2B中的SVG几何缩放问题；和webkit（d3.js）

我在Inkscape中创建了相当复杂的SVG。它内部有两个层（组），

，

，

和

元素。我想添加缩放功能以获得更详细的信息，所以我尝试实现几何缩放，如Mike的示例所示：。它在Firefox中也能正常工作，但在基于IE9+和webkit的浏览器中，我可以看到

transform

属性的变化，但图片保持不变。 以下是缩放代码：

var svg = d3.select("svg#svgCanvas");

  var zoom = d3.behavior.zoom()
    .scaleExtent([1, 3])
    .on("zoom", zooming);

  svg.call(zoom);

  function zooming() {
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

---

知道它为什么会失败吗？

问题是由Inkscape的层引起的，因此，通过删除

inkscape:groupmode=layer

和其他不必要的属性，将它们更改为简单的

元素。如果将内容放在

g

中，然后将转换应用于该

g

，会发生什么？如果我将转换应用于

内部的一些

，它会起作用，但它打破了所有的东西，因为一些元素已经有了transformattr，所以重写它会造成混乱。如果我将转换应用于

本身，则不会发生重新播放（但同时在Firefox中一切正常）。音乐上意味着添加一个包含所有内容的新

。如果你将转换应用到其他元素，它就不会弄乱其他元素的转换。是的，我昨天也有同样的想法，将所有内容包装在一个额外的

元素中。因此，由于Inkscape层的原因，所有操作都会失败，因此应将它们更改为简单的

元素。