clip_path_3.svg 591 B

12345678910111213
  1. <!-- multiple clip-rules -->
  2. <svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
  3. <defs>
  4. <clipPath id="myClip">
  5. <path d="M 250,75 L 323,301 131,161 369,161 177,301 z" clip-rule="evenodd"/>
  6. <path d="M 250,75 L 323,301 131,161 369,161 177,301 z" transform="translate(250, 0)" clip-rule="nonzero"/>
  7. </clipPath>
  8. </defs>
  9. <circle cx="400" cy="200" r="150" fill="green" fill-opacity=".5" stroke="black" clip-path="url(#myClip)" />
  10. <g clip-path="url(#myClip)">
  11. <circle cx="450" cy="300" r="150" fill="blue" fill-opacity=".6" stroke="black" />
  12. </g>
  13. </svg>