Safari SVG掩码渲染故障(剪辑路径)

Question

我正试图用SVG掩码制作一个图像揭幕效果，其中通过CSS转换缩放具有相当复杂几何形状的路径：

clip-path: url(#aqua-dot-mask);

https://codepen.io/rberneder/pen/pojaNex

我在Chrome、Firefox和Safari中测试了这种效果。前两个浏览器展示了我想要实现的目标，但Safari确实存在问题和小故障。

Safari似乎仍然没有完全支持剪辑路径属性，但它应该能够支持这个特定的属性。https://caniuse.com/#search=clip-路径

有什么想法吗？

Answer 1

感谢@Robert的帮助。我提出的解决方案是将img标记作为image标记放入SVG中。

代替：

<img src="..." style="clip-path(#mask)" />
<svg>
<defs>
<clipPath id="mask">...</clipPath>
</defs>
</svg>

我现在有：

<svg>
<defs>
<clipPath id="mask">...</clipPath>
</defs>
<image href="..." style="clip-path: url(#mask);" />
</svg>

https://codepen.io/rberneder/pen/xxwYmOj

这对我有用。