SVGLoader extruding right angled arrows incorrectly

I am experimenting with extrusion. Here’s a sample extrusion code: https://codepen.io/cwee/pen/yLwbQWQ. I’ve put in my own SVG data for testing:

Here’s how the svg diagram is supposed to look like:
image

But it looks like this when extruded:
image

I would like to know why this is the case any help is appreaciated!

The arrows in your SVG are strokes, not filled polygons. Most likely strokes cannot be extruded. My suggestion is to convert strokes into polygons, like this:

You may test with a simple illustration, e.g. one arrow as a stroke and one arrow as as polygon. If the polygon is working, then convert the rest lines into polygons.

Alternatively, you can extrude a vertical thin wall along the stroked path, as it is done in this demo:

https://codepen.io/boytchev/full/jOvWGPN

I’m not good with SVGs, so I won’t be able to provide further help. You may also have a look at the @prisoner849 's solution in this thread: SVG extrude without filling the path?