CODEWITHSUNDEEP
javascriptcsssvgpolygon
user3782872
user3782872

Reputation: 98

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>

Upvotes: 2

Views: 922

Answers (2)

user3782872
user3782872

Reputation: 98

Hi The Problem is resolve now.

<style>
#img {clip-path: url(#clipping);
      -webkit-clip-path: url(#clipping);
      -webkit-shape-outside: url(#clipping);
       shape-outside: url(#clipping);
}
</style>

<svg width="0" height="0">
  <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>

Thank you for the support

Upvotes: 2

Vlas Bashynskyi
Vlas Bashynskyi

Reputation: 2013

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

Upvotes: 1

Related Questions