SVGLoader path issue - some of my paths are being filled unexpectedly

Thank you.

At the core of the phenomenon you are observing seems to be some ambiguity as for the fill-rule to be applied.

Your svg does not specify any “fill-rule”, so the default applies which is “nonzero” (Source). The difference between fillrule “nonzero” and the other possible setting “evenodd” is shown in this illustration:
fillrule-nonzero
The effect of a nonzero fill rule on paths with self-intersections and enclosed subpaths.

By contrast, “even-odd” works like this:
fillrule-evenodd
The effect of an evenodd fill rule on paths with self-intersections and enclosed subpaths.

Source.

Note the sense of rotation (sequence of vertices), how each sub-path is being specified in the above examples.

Since your svg file doesn’t specify a fill-rule yet renders correctly, I’m afraid the ball is now in Three.js’ court. I couldn’t find any Path or Curve setting to specify which fill-rule is employed on the Three.js side. Maybe someone can take over from here.

Related: SVG extrude without filling the path?

1 Like