我有一个网页,在其中我使用了一个SVG剪辑路径应用于页面的一个HTML元素。
SVG元素:
应用剪辑路径的HTML元素:
定义剪辑路径的CSS:
在同一页上,我有多个元素,其中一些是相对定位的:
在Safari(8.0.4)中,只要从
最新版本的Firefox和Chrome都能正常显示。
将
禁用裁剪路径(通过完全删除SVG元素或从CSS中删除
有人遇到过这种情况或者有什么建议可以让这些相对定位的元素显示出来吗?
编辑: 可能这是Mac的问题。虽然在OSX的Chrome和Firefox中显示正常,但在iOS上的任何浏览器中都无法显示相对定位的DIV。
有什么想法吗?
<svg height="0" width="0">
<defs>
<clipPath id="clip">
<path d="M150 0 L75 200 L225 200 Z" />
</clipPath>
</defs>
</svg>
应用剪辑路径的HTML元素:
#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到SVG元素内的裁剪路径(clipPath)的链接保持完整,这些相对定位的元素就不会被显示出来。最新版本的Firefox和Chrome都能正常显示。
将
position:
属性更改为除相对定位以外的任何值,就可以正常显示所有内容。禁用裁剪路径(通过完全删除SVG元素或从CSS中删除
clip-path:
属性)也可以正常显示所有内容。
JSfiddle:
再次强调,这只是Safari的问题。我花了一段时间才将其隔离到与SVG裁剪路径和position: relative
有关,因此我猜可能还有其他类似结果的情况。有人遇到过这种情况或者有什么建议可以让这些相对定位的元素显示出来吗?
编辑: 可能这是Mac的问题。虽然在OSX的Chrome和Firefox中显示正常,但在iOS上的任何浏览器中都无法显示相对定位的DIV。
有什么想法吗?
position:relative
属性的元素未显示。这只是我的个人见解。 - Daveh0