嵌套svg的D3.js缩放会中断Internet Explorer中的视口

debugcn 发表于 Dev

高积云

我正在使用d3.js动态设置嵌套的svg，即嵌套在封闭的svg中的内部svg。一个d3.behavior.zoom（）侦听在外SVG缩放事件并执行所需要的变革。

除了Internet Explorer（IE 11）似乎与涉及内部svgs的转换有关的问题外，其他所有方法都工作正常。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);

我想念什么吗？有跨浏览器的解决方法吗？

阿米莉亚

抱歉，您首次发布该问题时没有引起足够的重视：它实际上是一个简单的解决方法。只需将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在外部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上的填充视为“溢出”方面也存在差异。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-9

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章