7

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="https://i.stack.imgur.com/MnWjF.png" width="728" height="482" >
KyleMit
  • 30,350
  • 66
  • 462
  • 664
Saman Mohamadi
  • 4,454
  • 4
  • 38
  • 58

2 Answers2

3

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>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • 1
    Could you please show how the correct mark-up would look like in your question? – Griffin Apr 27 '14 at 17:17
  • @Griffin I got it to work by changing the `` to this : ` ` and for the style, instead of using the img tag for styling, I changed it to a class called "MyClipping". – Pancho Nov 12 '14 at 18:03
0

Until now (Jan/2021) Crome seem to not support "*-box" options, i.e. border-box, but supports functions like polygon, etc.

Jakub Sika
  • 21
  • 2