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
Post a Comment