CODEWITHSUNDEEP
htmlsvgpathpolygon
kipid
kipid

Reputation: 608

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

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?

filled-outside image

Upvotes: 3

Views: 3771

Answers (3)

Andhavarapu Balu
Andhavarapu Balu

Reputation: 109

The answer by @user36956 works if you have the power to draw the shape that you want to have.

But in my case, my intention was rather to use external fill as a way to conceal protrusions, to avoid drawing the exact shape that I need.

For example, when I wanted to draw a beach ball, I drew ellipses that I intended to cover up later with a circle with external fill (images attached)

Picture of beach ball with protrusions extending around it Picture after correcting it

I did this with a workaround: I drew a circle around it with a large stroke-width, and stroke colour white and fill colour none.

To illustrate this, let us consider this SVG of a rectangle that extends from the top to the bottom of the frame

<!DOCTYPE html>
<html>
    <body>
        <svg width="200px" height="200px" style="border: 2px solid black">
            <rect x="80px" y="0px" width="40" height="200" fill="red"/>
        </svg>
    </body>
</html>

The height of the whole frame is 200px. I intend to keep a circular region of it of height 100px at the center of the frame. The rest of the rectangle has to be erased. That is, I want a circle of radius 50px with outer fill. For this, I added a circle of radius 100px and a stroke-width of 100px. Half of the stroke goes outside the circle and half (50px) comes inside. This leaves a circular region of radius 20px at the center of the frame, like I wanted.

<!DOCTYPE html>
<html>
    <body>
        <svg width="200px" height="200px" style="border: 2px solid black">
            <rect x="80px" y="0px" width="40" height="200" fill="red"/>
            <circle cx="100px" cy="100px" r="100" stroke="white" fill="none" stroke-width="100"/>
        </svg>
    </body>
</html>

Upvotes: 0

user36956
user36956

Reputation: 320

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.

Upvotes: 3

Paul LeBeau
Paul LeBeau

Reputation: 101918

You can't "fill outside" of a shape. But you can put a shape behind it.

In your example, you would have a blue square and then in front of it put a star-shaped clipped image.

Upvotes: 2

Related Questions