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 | right：chrome）

Codepen：https://codepen.io/zworek/pen/gGbgPL

我在这里定义错误或者纯粹是Chrome的错误吗？即使它是某种错误：是否有任何变通方法？

我的Chrome版本为60.0.3112.113 x64

Answer 1

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

Chrome上奇怪的SVG掩码行为

1 个答案: