Question

I am writing some stuff with d3 and I came across a a bizarre problem. Paths that are closed end with a ‘Z’ character, but every path I make closes ( and fills ) regardless of whether I include a Z or not. Even in isolation with examples copied from the spec this happens. For example:

<svg>
    <path d="M 40 60 L 10 60 L 40 42.68 M 60 60 L 90 60 L 60 42.68"/>
</svg>

I am baffled as to what the problem could be. I would appreciate any insight.

Answer 1

The relevant line from the SVG specification, regarding filling paths:

The fill operation fills open subpaths by performing the fill operation as if an additional “closepath” command were added to the path to connect the last point of the subpath with the first point of the subpath.

So, as far as the fill is concerned, there’s an implicit “Z” at the end. However, for the stroke, there’s no implied closure, so it won’t draw a stroke connecting the last point to the first point unless you explicitly add a “Z”.

If you only want to apply a stroke, use CSS to disable the fill:

path {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}

(I see you answered your own question, but I thought others might still find an explanation useful.)