如何将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并将其应用于页面上的几个DIV.它可以在FF中正常工作/显示，但是在Chrome和Safari(所有最新版本)中，如果HTML元素位于页面的左上角，那么clipPath似乎只会影响HTML元素.

I have defined an SVG clipPath and am applying it to a few DIVs on my page. It works/displays as expected in FF, but in Chrome and Safari (all latest versions), it seems that the clipPath will only affect an HTML element if the HTML element is positioned in the top-left corner of the page.

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元素...但是我真的不确定.

I believe this article begins to address this by use of coordinate systems, but I got lost/confused very quickly several times. It sounds like it's saying that using different units of measurements and coordinates, it's possible to apply a clipPath to any HTML element... but I'm really not sure.

我从Illustrator中导出了clipPath，因此，如果需要使用不同的单位/坐标，我不确定该怎么做.

I exported my clipPath from Illustrator so if there were different units/coordinates that need to be used, I'm not sure how I'd go about doing it.

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

In Chrome and/or Safari, has anyone successfully applied an SVG clipPath (that was an actual path - not a polygon or ellipse) to an HTML element located somewhere other than the top left of the page?

推荐答案

我认为 PaulOB的回应在SitePoint上解决了这个问题很好长话短说:对于Webkit浏览器，尚不支持将SVG clipPath应用于HTML元素.

I think PaulOB's responses over at SitePoint wraps this issue up pretty nicely. Long story short: support for applying an SVG clipPath to an HTML element is not quite there for webkit browsers yet.

这篇关于如何将SVG clipPath应用于不在Webkit浏览器中文档左上角的HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！