Chrome 上奇怪的 SVG 蒙版行为

Question

我遇到了我认为非常简单的 SVG 掩码的奇怪行为：

<svg width="400" height="400">
  <defs>
    <mask id="mask" x="0" y="0" width="400" height="400">
      <rect x="0" y="100" width="400" height="100" fill="#FFF"></rect>    
    </mask>
  </defs>
  <g mask="url(#mask)">
    <rect fill="#BBB" x="0" y="0" width="400" height="400"></rect>    
  </g>
</svg>

在 Chrome 上它呈现为 3 个灰色矩形（其中两个响应滚动），而我认为它应该只有一个矩形（firefox 和 edge 如此呈现）

corresponding image（左：edge/firefox | 右：chrome）

代码笔：https://codepen.io/zworek/pen/gGbgPL

我是不是定义错了，还是纯粹是 Chrome 的错误？即使它是某种错误：是否有任何解决方法？

我的 Chrome 版本是 60.0.3112.113 x64

Answer 1

这个错误似乎是 Chrome 60 中的回归 - 它不再出现在 Chrome 61 中。（可能应该关闭问题）

Chrome 上奇怪的 SVG 蒙版行为

Weird SVG mask behaviour on Chrome

svg

google-chrome

mask