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

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

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

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

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

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

有什么想法吗?

【问题讨论】:

  • 相当肯定,在 Safari 中,您只能将掩码应用于 SVG 元素,而不能应用于 HTML 元素。

标签: svg safari mask 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>

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

这对我有用。

【讨论】:

    猜你喜欢
    • 2013-05-10
    • 1970-01-01
    • 2020-10-12
    • 1970-01-01
    • 1970-01-01
    • 2015-10-07
    • 1970-01-01
    • 2018-03-30
    • 1970-01-01
    相关资源
    最近更新 更多