5

我有一个网页，我在其中使用了应用于页面 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) 中，只要从#clipMediv 到 clipPath（在 SVG 元素内）的链接完好无损，就不会显示这些相对定位的元素。

最新版本的 FF 和 Chrome 按预期显示。

将属性更改为非position:相对属性会按预期显示所有内容。

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

JSfiddle：

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

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

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

有任何想法吗？

4

2 回答 2

9

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

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

于 2015-04-25T01:22:06.353 回答
0

两件事情：

  1. 使用 CSS 设置显示：块；对于任何位置的东西：相对；
  2. 尝试清楚：两者；任何位置：相对；

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

编辑：可能已经发现了问题。

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

您应该使用前缀 -webkit-clip-path：

于 2015-04-24T06:53:00.303 回答