我有一个网页,我在其中使用应用于该页面的 HTML 元素之一的 SVG 剪辑路径。
SVG 元素:
<svg height="0" width="0">
<defs>
<clipPath id="clip">
<path d="M150 0 L75 200 L225 200 Z" />
</clipPath>
</defs>
</svg>
应用剪切路径的 HTML 元素
<div id="clipMe"> </div>
定义剪辑的 CSS
#clipMe {
clip-path: url(#clip);
-webkit-clip-path: url(#clip);
width: 200px;
height: 200px;
background-color: red;
}
在同一个页面上,我有各种元素,其中一些元素是相对定位的:
<div style="position: relative">
<strong>My parent is relative</strong>
</div>
仅在 Safari (8.0.4) 中,只要来自 #clipMe
的链接,这些相对定位的元素就不会显示。 div 到 clipPath(在 SVG 元素内)是完整的。
最新版本的 FF 和 Chrome 按预期显示。
改变 position:
除 relative 之外的任何属性都会按预期显示所有内容。
禁用剪切路径(通过一起删除 SVG 元素或从 CSS 中删除 clip-path:
属性)也会按预期显示所有内容。
同样,这仅适用于 Safari。我花了一段时间才将其隔离为关于 SVG 剪切路径和 position: relative
所以我猜可能还有其他情况会产生类似的结果。
有没有人遇到过这个问题或者有什么建议让那些相对定位的 s 显示出来?
编辑
这可能是 Mac 的事情。虽然它在 OSX 的 Chrome 和 Firefox 中显示正常,但在 iOS 上的任何浏览器中都不会显示相对定位的 DIV。
有什么想法吗?
最佳答案
尝试在剪裁元素上使用 -webkit-transform:translateZ(1px)
。如果它没有在移动设备上显示,您可能还需要包含其他前缀。 Demo
它通过将其放在 GPU 上来强制硬件加速(本质上浏览器更注重渲染它)。
关于css - 位置为 : relative with SVG clip paths not displaying in Safari 的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29840326/