Question

我在Inkscape中创建了相当复杂的SVG。它内部有几个图层（组），<path>，<rect>，<circle>和<text>个元素。我想添加缩放功能以获得更多细节，所以我尝试实现几何缩放，就像迈克的例子一样：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 + ")");
}

任何想法为什么会失败？

Answer 1

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

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

1 个答案: