How to fill outside of html <polygon> or <path>?

Question

Can I fill outside of html <polygon> or <path> like the below image?

<div style="background:'image.png'>
  <svg style="background:rgb(100,100,230)">
    <polygon points="x,y x1,y1 ..."
      style="fill:???;fill-rule:???"/>
  </svg>
</div>

I can definitely fill inside of <polygon> or <path>. But how can I fill outside of them? I know one work-around which uses outer polygon enclosing the outside of the star. Is there a simple way?

Answer 1

I haven't found a way to fill the outside of a polygon. But you can produce the same effect, though it's a bit messy, like this.

Start somewhere outside your canvas. Create a path that goes from there to a point on the near side of the perimeter of your polygon, follow round your polygon - let's say we do this clockwise - all the way back to where you joined it, carry on clockwise to a point outside your canvas, and then go round the outside of your canvas, anticlockwise, in a big rectangle, back to where you first started.