Question

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

一切正常，除了Internet Explorer（IE 11），它似乎与涉及内部svgs的转换有问题。 Firefox和Chrome都按预期行为将内部svg剪切到外部svg的视口。但是，在Internet Explorer中，正确放大应用转换但似乎忽略了封闭svg的尺寸。内部svg的内容最终将显示在外部svg之外和其他body元素之上。外部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＆＃39} ; s默认样式表，除了以用于根SVG元素。其他浏览器将此异常解释为仅应用于作为 .svg 文档的根的<svg>元素。 Internet Explorer也适用于将HTML文档中的顶级内联SVG视为根（因此具有overflow: visible）。

以下代码段演示了不同的行为。它在内联SVG内部使用嵌套SVG内的圆圈。对于嵌套的SVG，圆圈太大，因此如果嵌套SVG上隐藏溢出（在所有浏览器中默认为隐藏），圆圈将被裁剪为正方形。嵌套的SVG是偏移的，部分在外部SVG之外。如果在外部SVG上隐藏溢出，则嵌套的SVG将被裁剪为矩形;如果溢出是可见的，你会看到方框在框架外面粘住。

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

＆＃13;

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

＆＃13;

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

＆＃13;

应该澄清SVG 2或the SVG integration spec中的溢出行为。 Firefox和Blink / Webkit浏览器之间也存在差异，关于是否考虑内联SVG上的填充＆＃34;溢出＆＃34;或不。

D3.js使用嵌套的svg缩放在Internet Explorer中中断视口

1 个答案: