IE9+ 和 webkit (d3.js) 中的 SVG 几何缩放问题答案

【问题标题】：SVG geometric zoom issue in IE9+ and webkit (d3.js)IE9+ 和 webkit (d3.js) 中的 SVG 几何缩放问题
【发布时间】：2013-11-28 14:30:49
【问题描述】：

我在 Inkscape 中创建了相当复杂的 SVG。它有几个层（组），<path>，<rect>，<circle> 和 <text> 里面的元素。我想为更多细节添加缩放功能，所以我尝试像 Mike 的示例中那样实现几何缩放：SVG Geometric Zooming。它在 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 + ")");
}

任何想法为什么它会失败？

【问题讨论】：

如果您将内容放入g，然后将转换应用于g，会发生什么？
如果我在<svg> 内对一些<g> 应用变换，它可以工作，但它破坏了所有东西，因为某些元素已经具有变换属性，所以重写它会造成混乱。如果我将转换应用于<svg> 本身，则不会发生重新渲染（但同时在 Firefox 中一切正常）。
在音乐上意味着添加一个包含所有内容的新<g>。如果你应用变换，它不应该弄乱其他元素的变换。
是的，我昨天也有了同样的想法，将所有内容包装在一个额外的 <g> 元素中。因此，由于 Inkscape 层，一切都失败了，应该将它们更改为简单的 <g> 元素。

标签： svg d3.js zooming inkscape

【解决方案1】：

问题是由 Inkscape 的图层引起的，因此通过删除 inkscape:groupmode = layer 和其他不必要的属性将它们更改为简单的 <g> 元素并全部修复。

【讨论】：