D3.js 缩放与嵌套 svg 打破了 Internet Explorer 中的视口

Question

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

除了 Internet Explorer (IE 11) 似乎在涉及内部 svg 的转换方面存在问题外，一切正常。 Firefox 和 Chrome 都按预期将内部 svg 剪切到外部 svg 的视口。然而，在 Internet Explorer 中，放大正确地应用了转换，但似乎忽略了封闭 svg 的尺寸。内层 svg 的内容最终将显示在外层 svg 之外和其他正文元素之上。外部 svg 的视口似乎对内部 svg 没有剪裁效果。

我已经设置了一个 JSFiddle 来展示这种行为。

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);

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

Answer 1

很抱歉，当您第一次发布这个问题时，它没有引起足够的重视：它实际上是一个简单的修复。只需将外部 SVG 上的 overflow 属性设置为 hidden。

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

这是因为他们默认设置了这个属性。 CSS 中overflow 的初始值为visible，但SVG specs 要求任何可以采用viewBox 属性的元素在浏览器的默认样式表中具有overflow:hidden，除了根 SVG 元素。其他浏览器将此异常解释为仅适用于作为 .svg 文档根的<svg> 元素。 Internet Explorer 还将 HTML 文档中的顶级内联 SVG 视为根（因此具有 overflow: visible）。

下面的 sn-p 演示了不同的行为。它使用内联 SVG 内的嵌套 SVG 内的圆圈。圆形对于嵌套的 SVG 来说太大了，所以如果溢出隐藏在嵌套的 SVG 上（因为它在所有浏览器中都是默认的），圆形将被裁剪成一个正方形。嵌套的 SVG 是偏移的，部分在外部 SVG 之外。如果溢出隐藏在外部 SVG 上，嵌套的 SVG 将被裁剪为一个矩形；如果溢出是可见的，你会看到方块粘在框架外面。

第一个 SVG 在外部 SVG 上使用默认溢出（IE 不同），而其他 SVG 显式设置 overflow: hidden 或 overflow: visible。

svg {
    border: solid gray;
    height: 100px;
    width: 100px;
    margin: 50px;
}
circle {
    fill: royalBlue;
}

<svg>
    <svg x="-50" y="-50" width="100" height="100" >
        <circle r="100" cx="50" cy="50"/>
    </svg>
</svg>
<svg style="overflow: hidden">
    <svg x="-50" y="-50" width="100" height="100" >
        <circle r="100" cx="50" cy="50"/>
    </svg>
</svg>
<svg style="overflow: visible">
    <svg x="-50" y="-50" width="100" height="100" >
        <circle r="100" cx="50" cy="50"/>
    </svg>
</svg>

应该对SVG 2 或the SVG integration spec 中的溢出行为进行澄清。 Firefox 和 Blink/Webkit 浏览器之间关于内联 SVG 上的填充是否被视为“溢出”也存在差异。