IE9 +和webkit中的SVG幾何縮放問題（d3.js）

我在Inkscape中創建了相當複雜的SVG。它有幾層（組），<path>,<rect>,<circle>和<text>裏面的元素。我想增加縮放功能以獲得更多細節，所以我試圖實現幾何縮放，就像這個Mike的例子：SVG Geometric Zooming。它在Firefox中的預期效果，但在IE9 +和基於webkit的瀏覽器我可以看到transform屬性更改，但圖片保持不變。這裏是代碼變焦：IE9 +和webkit中的SVG幾何縮放問題（d3.js）

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

任何想法，爲什麼它會失敗？

來源

2013-11-28 KoGor

如果將內容放在'g'中，然後將轉換應用到'g'，會發生什麼？ –

如果我將變換應用於' KoGor

音樂意味着添加一個包含所有內容的新''。如果將變換應用於該變換，則不應混淆其他元素的變換。 –

問題是由Inkscape的圖層引起的，所以將其更改爲簡單的<g>元素，刪除inkscape:groupmode = layer等固定所有不必要的屬性。

來源

2013-11-29 09:20:17 KoGor

IE9 +和webkit中的SVG幾何縮放問題（d3.js）

回答

相關問題