如何将 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如何将 SVG clipPath 应用于不在 webkit 浏览器中文档左上角的 HTML 元素
【发布时间】：2015-07-04 14:55:52
【问题描述】：

我已经定义了一个 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

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

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

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

【问题讨论】：

标签： css svg clip-path

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

example

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

【讨论】：

【解决方案3】：

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

【讨论】：