SVGLoader not handling multiple M (Move To) commands in path element

Questions
,
#1

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" />
</svg>
#2

I can’t reproduce this issue. When loading the SVG into webgl_loader_svg, I get this:

image
image1224×1058 2.05 KB

I have just saved the SVG into a local file and replaced the asset URL in the example.

#3

Here’s the source code (webgl_loader_svg but simplified). Only difference is I am using react-three-fiber

#4

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.

3 Likes
#5

That was it. I was so focused on debugging SVGLoader that I overlooked this simple logical error.