SVG在Safari中不希望出现的Alpha遮罩行为

Question

我正在尝试将单个蒙版应用于两个重叠的<rect> SVG元素。 I've created a simplified live example，包含以下代码：

<svg viewBox="0 0 100 100" style="background: #000">
	<defs>
		<!-- 	Define radial gradient	 -->
		<radialGradient id="radialFill">
			<stop stop-color="white" offset="0.8"/>
			<stop stop-color="black" offset="1"/>
		</radialGradient>
		
		<!-- 	Define mask with gradient	 -->
		<mask id="SVGMask" mask-type="luminance">
			<circle fill="url(#radialFill)" cx="50" cy="50" r="50"/>
		</mask>
	</defs>
	
	<!-- 	Use mask on group	 -->
	<g id="combined" style="mask: url(#SVGMask);">
		<rect id="rect" width="100" height="100" fill="#f90"/>
		<rect id="rect" width="50" height="100" fill="#fff"/>
	</g>
</svg>
<figcaption>Mask 2+ elements Safari bug</figcaption>

在上面的代码中，我有一个橙色的<rect>作为背景色，一个白色的<rect>占据了viewBox的一半，然后将它们包裹在<g>中，并将蒙版应用于整个小组。

此设置在Firefox和Chrome中都可以正常运行，但在Safari中效果不佳。如您所见，背景中的橙色逐渐消失，而白色显示为白色。看来该遮罩是分别应用于前后区域，而不是应用于整个组。

有人对此错误有解决方案或解决方法吗？它在OSX Safari和iOS Safari上均发生。 （我的用例比这要复杂得多，但是我创建了这个简化的示例来演示该错误）。

Answer 1

有一个（棘手的）解决方法，但是确实可以。面临的挑战是使遮罩将其输入视为位图，而不是覆盖的形状。您可以通过在形状组和遮罩之间的组上插入虚拟滤镜来踢Safari来执行此操作。进行以下更改：

将此添加到您的SVG定义中：

<filter id="dummy-filter>
   <feColorMatrix type="saturate" values="1"/>
</filter>

，然后将图形标记更改为此：

<g id="combined" ... etc.
 <g filter="url(#dummy-filter)">
   <rect ... etc.
   <rect ... etc.
 </g>
</g>