clip-path does not work with chrome

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>

Tags:

Css

Svg

Clip Path