Chromeでclip-pathが機能しない

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のは、HTML、画像にSVGクリップ経路を適用するサポートしていません。イメージを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>