1

我已经定义了一个 SVG clipPath 并将它应用到我页面上的几个 DIV。它在 FF 中按预期工作/显示，但在 Chrome 和 Safari（所有最新版本）中，如果 HTML 元素位于页面的左上角，clipPath 似乎只会影响 HTML 元素。

SVG 对象

<svg height="0" width="0">
    <defs>
        <clipPath id="clip">
            <path fill="#000000" d="M0,0.01c3.472,1.088,6.688,3.663,7.878,9.208c1.604,7.482,4.305,11.862,7.102,11.79v0.003
        c0.007,0.001,0.014-0.001,0.02-0.001c0.007,0,0.014,0.002,0.021,0.001v-0.003c2.797,0.072,5.499-4.308,7.103-11.79
        C23.312,3.672,26.527,1.098,30,0.01H0z"/>
        </clipPath>
    </defs>
</svg>

要剪切的元素的 CSS

.clipMe {
    background: red;
    width: 30px;
    height: 21px;
    clip-path: url(#clip);
    -webkit-clip-path: url(#clip);
}

JSFIDDLE

我相信这篇文章开始通过使用坐标系来解决这个问题，但我很快就迷失了/困惑了好几次。听起来好像是在说使用不同的测量单位和坐标，可以将 clipPath 应用于任何 HTML 元素......但我真的不确定。

我从 Illustrator 导出了我的 clipPath，所以如果需要使用不同的单位/坐标，我不知道该怎么做。

在 Chrome 和/或 Safari 中，是否有人成功地将 SVG clipPath（这是一个实际路径 - 不是多边形或椭圆）应用于位于页面左上角以外的 HTML 元素？

4

3 回答 3

0

我认为PaulOB 在 SitePoint 的回复很好地解决了这个问题。长话短说：webkit 浏览器还不完全支持将 SVG clipPath 应用于 HTML 元素。

于 2015-04-27T11:43:57.930 回答
0

当我在寻找这个问题的答案时，我遇到了你的问题。我找到了所有的答案，包括：“你就是不能”的答案有点像警察。

我一直在尝试，我发现是这样的：

当你有一个 svg clipPath 时，据我所知，它是不可定位的，但是如果你考虑到你可以把它扔到一个 iframe 中然后定位 iframe，你就是黄金。

我包含了一个链接，我不确定它会在它“爆炸”之前存在多长时间，因为我不是服务器的所有者。

例子

该链接的内容是相当不言自明的，如果它不再出现，请给我发消息或回复这篇文章，我会在我自己的服务器上的某个地方进行更新。

于 2015-05-08T17:06:39.127 回答
0

Chrome 和 Opera 中的问题刚刚得到修复，并将在接下来的几周内推出。浏览器确实总是在页面原点应用参考剪辑。新行为应与 Firefox 匹配。

于 2016-06-23T14:45:35.363 回答