Safari SVG 蒙版渲染故障（剪辑路径）答案

【问题标题】：Safari SVG mask render glitch (clip-path)Safari SVG 蒙版渲染故障（剪辑路径）
【发布时间】：2020-08-21 14:12:31
【问题描述】：

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

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

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

看起来 Safari 仍然没有完全支持 clip-path 属性，但它应该能够支持这个特定的属性。 https://caniuse.com/#search=clip-path

有什么想法吗？

【问题讨论】：

【解决方案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>

这对我有用。

【讨论】：