SVG蒙版在Chrome中旋转时不工作(但在Firefox和Safari中工作)

Question

我正在用SVG构建一个具有各种操作的绘画工具，例如绘制矩形和旋转。其中一个操作是添加蒙版，有效地将内容打开到特定区域。为了实现这一点，我使用了svg mask元素。然而，当还添加旋转时，遮罩似乎不工作，元素渲染奇怪。这是一个示例SVG:

<svg width="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-250 -300 500 600">
<defs>
<mask id="57656">
<rect fill="black" x="-250" y="-300" width="500" height="600"></rect>
<rect fill="white" x="-72" y="-141" width="235" height="287"></rect>
</mask>
</defs>
<g transform="rotate(20)">
<g mask="url(#57656)">
<rect x="0" y="202" width="271" height="118" fill="rgb(128,237,51)" opacity="0.21"></rect>
<rect x="3" y="167" width="313" height="318" fill="rgb(152,28,5)" opacity="0.58"></rect>
<rect x="-65" y="-40" width="317" height="222" fill="rgb(74,103,68)" opacity="0.29"></rect>
</g>
</g>
</svg>

它应该是什么样子(在firefox和safari)

chrome上的效果

在chrome上不旋转的样子

是什么原因导致的?是bug吗?我也试过style="transform: rotateZ(20)"但这有同样的问题。

Answer 1

显然，这个问题也与透明度有关呈现。

将opacity替换为fill-opacity应用于遮罩元素，为我修复了此错误。

svg {
width: 20em;
border: 1px solid #ccc
}

<svg width="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-250 -300 500 600">
<defs>
<mask id="m57656">
<rect fill="black" x="-250" y="-300" width="500" height="600"></rect>
<rect fill="white" x="-72" y="-141" width="235" height="287"></rect>
</mask>
</defs>
<g transform="rotate(20)">
<g mask="url(#m57656)">
<rect x="0" y="202" width="271" height="118" fill="rgb(128,237,51)" fill-opacity="0.21"></rect>
<rect x="3" y="167" width="313" height="318" fill="rgb(152,28,5)" fill-opacity="0.58"></rect>
<rect x="-65" y="-40" width="317" height="222" fill="rgb(74,103,68)" fill-opacity="0.29"></rect>
</g>
</g>
</svg>