css - clip-path does not work with chrome -


i have problem clip-path in chrome. firefox has no problem , shows html page correctly, 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 not support applying svg clippath html image. if make image svg image i.e. change tag <image> , put inside <svg> element work.

firefox does support applying svg clippath html image why works there.

here's 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> 

Comments

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

c++ - Correct method for redrawing a layered window -

java.util.scanner - How to read and add only numbers to array from a text file -