SVG Loader: incorrect rendering in complex SVGs

[dciug]

Describe the bug

I'm trying to use SVGLoader to load a more complex SVG generated from Illustrator

I get hundreds of warnings:

• THREE.Color: Unknown color url(#linear-gradient-26)
• SVGLoader: url access in attributes is not implemented.
• SVGLoader: Elliptic arc or ellipse rotation or skewing is not implemented.

And a few errors:

• THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.

To Reproduce

It occurs when I'm trying to load a complex svg, the code is the same. Unfortunately, I cannot share this SVG. I'll just upload parts of it, I suppose.

This is how the browser renders it:

This is how Three.js renders it:

Expected behavior

It should look exactly the same as the browser would render it natively, but the colors are undefined and the z-order of the elements seems wrong. The wireframe visualization is correct, though. The SVG also contains subtle elements with small opacity values. SVGLoader seems to ignore the shapes that are supposed to be visible through the transparent layers.

Platform:

• Device: Desktop
• OS: Windows
• Browser: Chrome, Firefox, Edge
• Three.js version: main branch

[yomboprime]

Sorry, I don't have anything useful to apport at this moment, and can't reproduce without the svg file.

[dciug]

I suppose most of the problems arise from the warnings, as Three.js cannot link the defs using the url.

[yomboprime]

Yes, there are lots of SVG features not implemented in the parser, like gradients, correct painting order, urls...

[yomboprime]

But, now that I think of it, you only want an image of the SVG, right? For that use case you can just convert the SVG to canvas and load into a texture (I think there's an example of that in the repo)

[dciug]

The first version used SVG interactivity using Snap.svg to click on the elements. Each click would get the coordinates of the element, convert them into screen-space and show some contextual information at that point. However, the performance was quite poor and unstable, which is why I looked into Three.js. I could convert it into canvas, but I would still need to get the coordinates of the elements. Can I do that in Canvas?

[mrdoob]

Closing this. We can reopen when the svg file is provided.

[dciug]

Here's a stripped down version of the svg: three.svg.zip

All I'm doing is just trying out the https://threejs.org/examples/#webgl_loader_svg demo

[yomboprime]

I've spent some time on this. It seems some bugs have been solved with previous PRs, and the errors about NaN values in the console are gone.

The mentioned warnings are still shown. These are the features that need to be implemented in SVGLoader to address them:

• Textures
• URL access in attributes
• URL-encoded PNG textures
• Fill gradients
• Elliptic arc or ellipse rotation or skewing
• Paint order

[iambarnaby]

This still doesn't seem to work. Unless I'm missing something.

[LeviPesin]

Because not all points of https://github.com/mrdoob/three.js/issues/21330#issuecomment-806367989 are solved yet.