javascript - IE 中的 SVG viewBox 行为

Question

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

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

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

当我垂直滚动时，所有东西都在框内移动，但 Internet explorer(11) 的行为不同。

像这样:

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

附言在这两个示例中，只有 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;
}