Question

我有一个网页，我在其中使用应用于其中一个网页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:属性）也会按预期显示所有内容。

JSfiddle:

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

有没有人遇到这个或有任何建议让这些相对定位的s显示？

修改
可能这是Mac的事情。虽然它在OSX中的Chrome和Firefox中显示为预期，但它不会在iOS上的任何浏览器中显示相对定位的DIV。

有什么想法吗？

Answer 1

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

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

Answer 2

两件事：

使用css set display：block;任何位置的东西：亲属;
试试清楚：两者;任何位置：相对;

我目前没有你正在测试的safari版本，但我从以前的经验中了解到使用position：relative;您可能需要清除或设置显示以阻止。

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

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

具有位置的元素：相对于SVG剪辑路径未在Safari

2 个答案: