I'm trying to create a bridge-like shape with an svg using javascript. With the following html I get the overall shape, but the close path is wrong: This produces the following shape: It is closing in a strange way which means that it isn't filling correctly. The strange vertical line from the top of the arch to the top left

Svg path not closing correctly

I’m trying to create a bridge-like shape with an svg using javascript. With the following html I get the overall shape, but the close path is wrong:

<svg height="897" width="414" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 414 897">
    <path stroke-width="3" stroke="blue" style="fill:transparent; fill-opacity: 1" 
        d="M 0 0 V 207 H 30 
           M 30 207 q 0 -177 177 -177 
           M 207 30 q 177 0 177 177 
           H 414 V 0 H 0 z">
    </path>
</svg>

This produces the following shape:

It is closing in a strange way which means that it isn’t filling correctly. The strange vertical line from the top of the arch to the top left shouldn’t be there. How do I get it to close properly and fill properly?

Answer

The path will close from your last point to the last declared M. You can fix this by removing all the M calls except the first one. Since you are making a continuous line you don’t need to move to a new point every time.

<svg height="897" width="414" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 414 897">
    <path stroke-width="3" stroke="blue" style="fill:transparent; fill-opacity: 1" 
        d="M 0 0 V 207 H 30 
           q 0 -177 177 -177 
           q 177 0 177 177
           H 414 V 0 H 0 z">
    </path>
</svg>

Advertisement

Answer