Javascript 在Internet Explorer中使用嵌套svg进行D3.js缩放打断视口

我正在使用d3.js动态设置嵌套的svg，即嵌套在封闭svg中的内部svg。A侦听外部svg上的缩放事件并执行所需的转换

除了InternetExplorer（IE11）之外，所有这些都可以正常工作，它似乎在涉及内部SVG的转换方面存在问题。Firefox和Chrome都按照预期将内部svg剪切到外部svg的视口中。然而，在InternetExplorer中，放大正确地应用了转换，但似乎忽略了封闭svg的维度。内部svg的内容最终将显示在外部svg的外部以及其他主体元素的上方。外部svg的视口似乎对内部svg没有剪切效果

我已经建立了一个展示这种行为的网站

var zoom = d3.behavior.zoom()
    .on("zoom", function () {
        container.attr("transform",
            "translate(" + d3.event.translate + ") " +
            "scale(" + d3.event.scale + ")");
    });

var container = d3.select("body")
                    .append("svg")
                      .attr("id", "svgcontainer")
                      .attr("width", 300)
                      .attr("height", 300)
                      .style("background-color", "#aaaaee")
                      .call(zoom)
                    .append("g");

var svg = container.append("svg")
                     .attr("width", 200)
                     .attr("height", 200)
                     .attr("x", 50)
                     .attr("y", 50);

svg.append("svg:circle")
     .style("fill", "none")
     .style("stroke", "red")
     .style("stroke-width", "2px")
     .attr("cx", 100)
     .attr("cy", 100)
     .attr("r", 50);

---

我错过什么了吗？有跨浏览器的解决方法吗？

很抱歉，这个问题在您第一次发布时没有引起足够的注意：实际上这是一个简单的解决方法。只需将外部SVG上的

overflow

属性设置为

hidden

那么，为什么您的代码在其他浏览器上按预期工作

这是因为他们默认设置了这个属性。CSS中

溢出

的初始值为

可见

，但除根SVG元素外，任何可以采用

viewBox

属性的元素都必须在浏览器的默认样式表中具有

溢出：隐藏

。其他浏览器将此异常解释为仅应用于作为.svg文档根的

元素。Internet Explorer还将HTML文档中的顶级内联SVG视为根（因此具有

overflow:visible

）

下面的代码片段演示了不同的行为。它在内嵌SVG中的嵌套SVG中使用一个圆。圆圈对于嵌套的SVG来说太大了，因此如果嵌套的SVG上隐藏了溢出（在所有浏览器中都是默认情况），圆圈将被裁剪成正方形。嵌套的SVG是偏移的，部分位于外部SVG之外。如果溢出隐藏在外部SVG上，则嵌套的SVG将被裁剪为矩形；如果可以看到溢出，您将看到方形卡在框架外

第一个SVG在外部SVG上使用默认溢出（与IE不同），而其他SVG则显式设置

overflow:hidden

或

overflow:visible

svg{
边框：纯灰；
高度：100px；
宽度：100px；
利润率：50像素；
}
圈{
填充：皇家蓝；
}

我刚刚查看了SVG WG电子邮件/会议纪要存档。尽管规范草案中尚未反映出清理溢出定义的承诺。IE行为（内联SVG为

溢出：可见
）已被选为首选行为。这就成功了！非常感谢你的解释。阅读了规范之后，IE似乎是唯一一个在这个问题上遵守规范的浏览器。你同意吗？老实说，在阅读了当前编写的规范之后，我同意其他浏览器的看法，因为规范中说的是“root”元素，而内联的
不是它的文档的根（
元素是）。然而，SVG规范的编写实际上没有考虑内联SVG，因此没有考虑这种情况。