Chrome 上奇怪的 SVG 蒙版行为答案

【问题标题】：Weird SVG mask behaviour on ChromeChrome 上奇怪的 SVG 蒙版行为
【发布时间】：2018-02-22 18:40:05
【问题描述】：

我遇到了奇怪的行为，我认为这是一个非常简单的 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）

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

我在这里定义了什么错误还是纯粹是 Chrome 的错误？即使它是某种错误：有任何解决方法吗？

我的 Chrome 版本是 60.0.3112.113 x64

【问题讨论】：

你确实有一个语法错误 - maskUnits 默认是 objectBoundingBox （掩码对象的百分比） - 如果你想使用像素，你应该使用 maskUnits="userSpaceOnUse"。但除此之外，面具应该可以工作。这看起来像是回归。
提交了一个版本：bugs.chromium.org/p/chromium/issues/detail?id=765028

标签： google-chrome svg mask

【解决方案1】：

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

【讨论】：