IE

Question

我有这个SVG并使用viewBox属性，我可以移动它并查看它的每个部分。

您在上图中看到的黄色框是一个恒定的400x400 SVG，它的宽度和高度不会改变。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="17900 -4100 1050 1050" preserveAspectRatio="none" width="400" height="400">

当我垂直滚动时，Eveything在框内移动，但Internet Explorer（11）的行为却不同。

像这样：

即使SVG高度和重量是400x400，但IE并不关心并移出SVG容器！ Internet Explorer如何在SVG元素之外绘制？我该如何解决？

P.S。在这两个示例中，仅更改了viewBox属性。

修改：https://jsfiddle.net/omidh/unjq6h0c/

Chrome和Firefox会在SVG元素中绘制所有形状，但Internet Explorer不会。

Answer 1

不应该使用它，但您可以将overflow: hidden添加到SVG。

svg {
  background-color: khaki; /* rgba(216, 210, 210, 0.06); */
  overflow: hidden;
}