文章/答案/技术大牛

发布

问剪辑路径不适用于铬。
EN

Stack Overflow用户

提问于 2013-10-07 14:45:31

回答 2查看 6.7K关注 0票数 6

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

svg

clip-path

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-10-07 15:23:04

Webkit不支持将SVG clipPath应用于html映像。如果您将图像变成SVG映像，即将标记更改为<image>并将其放入<svg>元素中，那么它将工作。

Firefox支持将SVG 应用到映像中，这也是它在那里工作的原因。

这是潘乔的一个例子。

<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>

票数 3

Stack Overflow用户

发布于 2021-01-16 04:00:50

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19227849

复制

相似问题

问剪辑路径不适用于铬。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问剪辑路径不适用于铬。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问剪辑路径不适用于铬。
EN