1

How should a polygon with holes in it be modelled with svg? Cant find anything on it.

enter image description here

altocumulus
  • 21,179
  • 13
  • 61
  • 84
Joe
  • 4,274
  • 32
  • 95
  • 175

1 Answers1

3

I'd mask a path:

<!DOCTYPE html>
<html>
  <body>
    <svg width="300" height="300">
      <defs>
        <mask id="mask" >
          <path d="M10 150L10 290L290 290L290 150,L10,150C10 -50,290 -50,290 150Z" fill="white"></path>
          <rect x="30" y="150" width="240" height="120" />
          <circle cx="150" cy="70" r="60"></circle>
        </mask>
      </defs>
      <rect width="300" height="300" x="0" y="0" mask="url(#mask)" style="fill:steelblue" ></rect>
    </svg>
  </body>
</html>
Mark
  • 106,305
  • 20
  • 172
  • 230