clip-path不能使用chrome [英] clip-path does not work with chrome

问题描述

我在Chrome中的 clip-path 有问题。 Firefox没有问题，并正确显示此html页面，但chrome不显示任何内容。

  img {-webkit-clip-path：url （＃剪裁）; clip-path：url（#clipping）; }  

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

解决方案

Webkit不支持将SVG clipPath一个html图像。如果您将图片设为SVG图片，即将标签更改为< image> ，并将其放在< svg> 元素，那么它会工作。

Firefox 确实支持将SVG剪辑路径应用于HTML图片，这是它在那里工作的原因。

下面是Pancho提供的示例。

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

I have problem with clip-path in Chrome. Firefox has no problem and shows this html page correctly, but chrome doesn't show anything.

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

解决方案

Webkit does not support applying an SVG clipPath to an html image. If you make the image an SVG image i.e. change the tag to <image> and put it inside the <svg> element then it will work.

Firefox does support applying an SVG clipPath to an HTML image which is why it works there.

Here's an example courtesy of 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>

这篇关于clip-path不能使用chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！