Question

我在Chrome中遇到clip-path问题。 Firefox没有问题，并且正确显示了这个html页面，但chrome没有显示任何内容。

img {
  -webkit-clip-path: url(#clipping); 
          clip-path: url(#clipping); 
}

<svg>
  <defs>
    <clipPath id="clipping">
      <circle cx="284" cy="213" r="213" />
    </clipPath>
  </defs>
</svg>

<img src="http://i.stack.imgur.com/MnWjF.png" width="728" height="482" >

Answer 1

Webkit不支持将SVG clipPath应用于html图像。如果您将图像设为SVG图像，即将标记更改为<image>并将其放在<svg>元素内，那么它将起作用。

Firefox 支持支持将SVG clipPath应用于HTML图像，这就是它在那里工作的原因。

这是Pancho提供的一个例子。

<svg width="245" height="180" viewBox="0 0 245 180" >
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="something.jpg" width="245" height="180" class="MyClipping" ></image>
</svg>

Answer 2

直到现在（2021 年 1 月）Crome 似乎不支持“*-box”选项，即边界框，但支持多边形等功能。

clip-path不适用于chrome

2 个答案: