javascript - 带有嵌套 svg 的 D3.js 缩放打破了 Internet Explorer 中的视口(viewport)

Question

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

除了 Internet Explorer (IE 11) 似乎在涉及内部 svg 的转换方面存在问题外，一切正常。 Firefox 和 Chrome 都按照预期的方式将内部 svg 剪裁到外部 svg 的视口(viewport)。然而，在 Internet Explorer 中，放大会正确应用转换，但似乎会忽略封闭 svg 的尺寸。内部 svg 的内容最终将显示在外部 svg 之外和其他 body 元素之上。外部 svg 的视口(viewport)似乎对内部 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

很抱歉这个问题在您第一次发布时没有得到足够的重视:它实际上是一个简单的修复。只需设置 overflow外部 SVG 上的属性为 hidden .

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

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

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

第一个 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 上的填充是否被视为“溢出”也存在差异。