Q:

SVG Polygon Shape with Image

I am trying to make polygon shape for Mozilla with the help of clip path. but I am not able to make it, Below are my code for the circle shape how to change the circle into polygon.
<style>
img {clip-path: url(#clipping);}
</style>

<svg>
  <defs>
    <clipPath id="clipping">
    <circle cx="284" cy="213" r="213" />
    </clipPath>
  </defs>
</svg>

<img src="img/1.jpg" width="568">

{Updated my Question}
Now I have created a polygon but Chrome is not supporting it... how to resolve that... below are my code for polygon it's working on Mozilla.
<style>
#img {clip-path: url(#clipping);
      -webkit-clip-path: url(#clipping);
      -webkit-shape-outside: url(#clipping);
       shape-outside: url(#clipping);
}
</style>

<svg>
  <defs>
    <clipPath id="clipping">
<!--      <circle cx="284" cy="213" r="213" />-->
    <path d="M188 0 L1 0 L1 188 L188 0 Z">
    </clipPath>
  </defs>
</svg>
<div id="img">
<img src="img/1.jpg" width="568">
</div>

A:

you can't change cirle into polygon, for polygon, use path tag and its d attribute. Here's a link that can help.

