0

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

enter image description here

altocumulus
  • 20,402
  • 12
  • 60
  • 80
Joe
  • 5,210
  • 27
  • 83
  • 156

1 Answers1

2

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
  • 104,129
  • 18
  • 164
  • 224