mask-and-clipPath-2.svg 778 B

12345678910111213141516171819202122
  1. <!--
  2. Any copyright is dedicated to the Public Domain.
  3. http://creativecommons.org/publicdomain/zero/1.0/
  4. -->
  5. <svg xmlns="http://www.w3.org/2000/svg"
  6. xmlns:xlink="http://www.w3.org/1999/xlink">
  7. <defs>
  8. <polygon id="p" points="0.25,0 0.75,0 0.75,1 0.25,1"/>
  9. <clipPath id="cp" clipPathUnits="objectBoundingBox">
  10. <use xlink:href="#p"/>
  11. </clipPath>
  12. <mask id="m" maskContentUnits="objectBoundingBox">
  13. <rect x="0" y="0.25" width="1" height="0.5" fill="white"/>
  14. </mask>
  15. </defs>
  16. <rect width="100%" height="100%" fill="lime"/>
  17. <rect x="101" y="101" width="198" height="198" fill="red"/>
  18. <rect width="400" height="400" fill="lime" mask="url(#m)" clip-path="url(#cp)"
  19. x="-400" y="-400" transform="translate(400,400)"/>
  20. </svg>