svg – clipPath fails

Question:

<svg width='400' height='400' style='border: 1px solid black'>
  <defs>
    <clipPath id="myclipPath">
         <polygon points="20,30 40,10 60,30" fill='red'/>
    </clipPath>
  </defs>
  <circle clip-path="url(#myclipPath)" r="100" cx="50%" cy="50%" fill="green"/>
</svg>

Answer:

Clipping doesn't cut anything because outside the circle :

As well as here: https://codepen.io/topicstarter/pen/KKpgLYZ I drew around the girl along the contour of her body and the clip-path worked and by the way outlined my hands, that is, manual work

To cut it out, you need to put a polygon more accurately and draw it on a circle

<svg width='400' height='400' style='border: 1px solid black'>
  <defs>
    <clipPath id="myclipPath">
         <polygon points="20,30 40,10 60,30" fill='red'/>
    </clipPath>
  </defs>
  
  <circle  r="100" cx="50%" cy="50%" fill="green"/>
  <polygon points="20,30 40,10 60,30" fill='red'/>
</svg>

In this example, the clipping is cutting, changing only the coordinates of the circle

<svg width='400' height='400' style='border: 1px solid black'>
  <defs>
    <clipPath id="myclipPath">
         <polygon points="20,30 40,10 60,30" />
    </clipPath>
  </defs>
  
  <circle r="100" cx="0%" cy="0%" fill="green" clip-path="url(#myclipPath)"/>
</svg>
Post Views: 0
Scroll to Top