Search code examples
svgd3.jszoominginkscape

SVG geometric zoom issue in IE9+ and webkit (d3.js)

I have quite complex SVG created in Inkscape. It has couple layers(groups), <path>, <rect>, <circle> and <text> elements inside. I want to add ability of zooming for greater details, so I tried to implement geometric zoom like in this Mike's example: SVG Geometric Zooming. And it works as expected in Firefox, but in IE9+ and webkit based browsers I can see transform attribute changing, but picture stays the same. Here is code for zoom:

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 + ")");
}

Any ideas why it can fails?

Solution

  • Issue was caused by Inkscape's layers, so changing them to simple <g> elements by deleting inkscape:groupmode = layer and other unnecessary attributes fixed all.