SVGLoader - issue with path / stroke - Cannot read property 'fill' of undefined

I’ve a fairly simple SVG that encounters the problem;

“SVGLoader.js:798 Uncaught TypeError: Cannot read property ‘fill’ of undefined”

I tried to check if the style was defined which stopped the crash, but the paths were not rendered.

The SVG is as follows; <svg viewBox="-2.5 -2.5 35 65" width="100%" height="100%" style="pointer-events: auto;"><ellipse cx="15" cy="8" rx="7.5" ry="7.5" fill="#ffffff" stroke="#6d6e71" pointer-events="all"></ellipse><path d="M 15 15 L 15 40 M 15 20 L 0 20 M 15 20 L 30 20 M 15 40 L 0 60 M 15 40 L 30 60" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 15 15 L 15 40 M 15 20 L 0 20 M 15 20 L 30 20 M 15 40 L 0 60 M 15 40 L 30 60" fill="none" stroke="#6d6e71" stroke-miterlimit="10"></path></svg>

Here’s a fiddle showing the issue; https://jsfiddle.net/mattscotty/b4g62cna/

Three.js version

• [x ] r111

Windows 10, Chrome latest.

Thanks

[yomboprime]

I thought that might be the case but wanted to check my understanding of the problem. I think it would be useful to have a method to import SVG’s as is without custom code to avoid confusion. In my example, I just want to import them into three.js as is, and I’d imagine that will happen a lot. If you agree I’m happy to open a separate feature request. Something along the lines of new SVGLoader().parseAdd(data, group)

Looking at it now, visibility is not available in userData and I’ve had to use path.userData.node.attributes.visibility.

Thanks for your help

Depending on your use case, converting a SVG DOM image to a Three.js texture is easy and is very performant. Though I understand that does not solve all cases.

Implementing the whole SVG specification is very complex. I don’t know if there is a roadmap to implement more of it, but I have to say I like SVGLoader as it is right now because it is very hackable and has a lot of uses like CAD, CNC and 3d printing.

[yomboprime]

In SVGLoader.js, it should probably be:

if ( node.style && node.style[ svgName ] !== '' ) style[ jsName ] = adjustFunction( node.style[ svgName ] );

/ping @yomboprime

Yep, that seems correct. Will look into it as well as #17885