如何将 SVG clipPath 应用于 Webkit 浏览器中不在文档左上角的 HTML 元素

Question

我已经定义了一个 SVG clipPath 并将其应用于我页面上的几个 DIV。它在 FF 中如预期的那样 works/displays，但在 Chrome 和 Safari（所有最新版本）中，clipPath 似乎只会影响 HTML 元素，如果 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

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

我从 Illustrator 导出了我的 clipPath，所以如果需要使用不同的 units/coordinates，我不确定我将如何去做。

在 Chrome and/or Safari 中，有没有人成功地将 SVG clipPath（这是一条实际路径 - 不是多边形或椭圆）应用到位于其他地方的 HTML 元素页面左上角？

Answer 1

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

Answer 2

在寻找这个问题的答案时，我遇到了你的问题。我发现所有的答案，包括："you just can't" 的答案都有点逃避。

我一直在努力，我发现的是：

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

我添加了一个 link，但我不确定它会在它之前放置多长时间 'explodes'，因为我不是服务器的所有者。

example

那个 link 的内容是不言自明的，如果它不再出现，请给我发消息或回复这个 post，我会在我自己的服务器上的某个地方进行更新。

Answer 3

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

如何将 SVG clipPath 应用于 Webkit 浏览器中不在文档左上角的 HTML 元素

How to apply SVG clipPath to HTML element that is not in the top left corner of document in webkit browsers

css

svg

clip-path