SVGLoader is not handling multiple M (Move To) commands in path element.
Everything after the second M command is ignored.
For example below I am drawing the alphabet “T”, but running it through SVGLoader only returns a straight vertical line.
<svg height="200" width="200">
<path d="M100,100 v-50 m25,0 h-50" stroke="black" />
I can’t reproduce this issue. When loading the SVG into webgl_loader_svg, I get this:
I have just saved the SVG into a local file and replaced the asset URL in the example.
Here’s the source code (webgl_loader_svg but simplified). Only difference is I am using react-three-fiber
I’m not familiar with
react-three-fiber but you have to ensure to create for each sub path a mesh with the respective JSX markup:
Right now, you return after the first iteration.
That was it. I was so focused on debugging SVGLoader that I overlooked this simple logical error.