Question

我正在尝试使用SVG蒙版制作图像揭幕效果，其中具有相当复杂几何形状的路径通过CSS变换进行缩放：

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

我在Chrome，Firefox和Safari中测试了效果。前两个浏览器展示了我想要实现的目标，但是Safari确实存在麻烦和故障。

似乎Safari仍然不完全支持clip-path属性，但是它应该能够支持这一特殊功能。 https://caniuse.com/#search=clip-path

有什么想法吗？

Answer 1

感谢@Robert的帮助。我想出的解决方案是将img标签作为图像标签放入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>

这对我有用。