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

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

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

那么为什么你的代码在你想要的其他浏览器上工作呢？

这是因为他们默认设置了这个属性.overflowCSS中的初始值是visible,但SVG规范要求任何可以获取viewBox属性的元素都overflow:hidden在浏览器的默认样式表中,但根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.

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或SVG集成规范,可能应该澄清溢出行为.Firefox和Blink/Webkit浏览器之间在内联SVG上的填充是否被视为"溢出"方面也存在差异.