剪辑路径不适用于 chrome答案

【问题标题】：clip-path does not work with chrome剪辑路径不适用于 chrome
【发布时间】：2013-10-14 04:53:58
【问题描述】：

我对 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" >

【问题讨论】：

标签： css svg clip-path

【解决方案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>

【讨论】：

能否在您的问题中展示正确的标记是什么样的？
@Griffin 我通过将<img> 更改为此：<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> 和样式，而不是使用 img 标记进行样式设置，我将其更改为一个名为“MyClipping”的类"。

【解决方案2】：

到目前为止（2021 年 1 月）Crome 似乎不支持“*-box”选项，即边框框，但支持多边形等功能。

【讨论】：