clip-path does not work with chrome

问题

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="http://i.stack.imgur.com/MnWjF.png" width="728" height="482" >

回答1:

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>

来源：https://stackoverflow.com/questions/19227849/clip-path-does-not-work-with-chrome