SVG HTML

A Simple Mask Path

This SVG example illustrates how to create a simple mask path.

MaskPathSimple.svg

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="idMask">
      <circle id="outer" cx="100" cy="100" r="75" fill="white"/>
      <circle id="inner" cx="100" cy="100" r="25" fill="black"/>
    </mask>
  </defs>
  <rect x="30" y="30" width="140" height="140" mask="url(#idMask)"
    fill="red" stroke="black" stroke-width="3"/>
</svg>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.