具有位置的元素:相对于 SVG 剪辑路径未在 Safari 中显示

Posted

技术标签:

【中文标题】具有位置的元素:相对于 SVG 剪辑路径未在 Safari 中显示【英文标题】:Elements with position: relative with SVG clip paths not displaying in Safari 【发布时间】:2015-07-02 15:14:30 【问题描述】:

我有一个网页,我在其中使用了应用于页面的 html 元素之一的 SVG 剪辑路径。

SVG 元素:

<svg  >
    <defs>
        <clipPath id="clip">
            <path d="M150 0 L75 200 L225 200 Z" />
        </clipPath>
    </defs>
</svg>

剪切路径应用到的 HTML 元素

&lt;div id="clipMe"&gt; &lt;/div&gt;

定义剪辑的 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: 属性更改为非相对属性会按预期显示所有内容。

禁用剪切路径(通过同时删除 SVG 元素或从 CSS 中删除 clip-path: 属性)也会按预期显示所有内容。

JSfiddle:

同样,这只是 Safari。我花了一段时间才将其隔离为关于 SVG 剪切路径和position: relative,所以我猜可能还有其他情况会产生类似的结果。

有没有人遇到过这个问题或者有什么建议让那些相对定位的 s 显示出来?

编辑 这可能是Mac的事情。虽然它在 OSX 的 Chrome 和 Firefox 中按预期显示,但在 ios 上的任何浏览器中都不会显示相对定位的 DIV。

有什么想法吗?

【问题讨论】:

我不同意标题更改。这意味着应用了剪辑路径的元素未显示。不是这种情况;剪辑的元素显示正常。没有显示的是页面上带有position:relative 的另一个元素。我的 .02. 【参考方案1】:

两件事:

    使用 css 设置显示:块;到任何位置的东西:相对的; 尝试清楚:两者;对于任何位置:相对的;

我目前没有您用来测试的 safari 版本,但我从以前使用 position:relative; 的经验知道您可能需要清除或将显示设置为阻止。

编辑:可能发现了问题。

浏览器对剪辑路径的支持在 safari http://caniuse.com/#feat=css-clip-path 中是部分的

你应该使用前缀 -webkit-clip-path:

【讨论】:

只是 svg 没有在 safari 版本中显示吗?如果是这样,则可能是浏览器兼容性问题。部分浏览器不支持 svg。 看了这个caniuse.com/#feat=svg后发现safari 8是兼容的 正如我在问题中所述,带有position:relative 的元素没有显示。应用 SVG 剪切路径的元素显示正常。 在您在 div style="position:relative;" 上方提供的示例中末尾没有分号 另外,您没有任何位置:相对 div 嵌套在另一个位置:相对 div 正确吗?【参考方案2】:

尝试在被剪裁的元素上使用-webkit-transform:translateZ(1px)。如果它没有在移动设备上显示,您可能还需要包含其他前缀。 Demo

它通过将它放在 GPU 上来强制硬件加速(本质上是浏览器更关注渲染它)。

【讨论】:

轰隆隆!我希望找到这种性质的解决方案。谢谢!它肯定解决了我的示例中的问题。我会报告它在我的实际应用程序中是否成立。是否有任何资源可以汇总这样的好技巧? @Daveh0 *** 是一个:P touche =) 有没有其他方法可以强制硬件加速?此解决方案解决了根本不显示元素并反过来导致新元素的问题:在我的“真实”实现中,有一个伪元素(通过 ::before 创建)需要与相对定位的元素重叠.为此,我将z-index: -1 分配给伪元素。在我添加 -webkit-transform:translateZ(1px) 之前它工作得很好,此时伪元素 z-index 似乎重置,导致它堆叠在主元素之上。 jsfiddle.net/daveh0/64awcv0p/6 @Daveh0 我不相信目前还有其他方法。将来我们可能会拥有 will-change 属性,它的作用大致相同,但尚未实现 @Daveh0 我不知道使用当前的伪元素设置。您可以尝试将伪元素附加到父元素而不是 jsfiddle.net/64awcv0p/8 即使它是您为该效果添加的元素

以上是关于具有位置的元素:相对于 SVG 剪辑路径未在 Safari 中显示的主要内容,如果未能解决你的问题,请参考以下文章

SVG:获取元素相对于页面的位置

具有剪辑路径的元素中的水平(子)像素间隙

当引用为 css 剪辑路径属性时,SVG 剪辑路径的位置不正确

使用 Safari 应用 SVG 剪辑路径时遇到问题

除了数据 url 之外,如何让伪元素上的剪辑路径 SVG 在 IE11/Edge 中工作?

将具有混合(固定和百分比)值的 CSS 剪辑路径转换为 ​​SVG 剪辑路径