SVG loader, groups, styles

Questions
,
1

Hi,
I’m loading SVG files which are then extruded.
In my SVG loader function I’m extracting the shape fill color using:
const fillColor = path.userData.style.fill;
from in-line SVG styles to be able to designate the corresponding extruded object’s color.

I’m making my SVGs in Illustrator CC 2021.

I have 2 questions.

  1. if I use non-in-line styles in my SVG ( css at top of xml) is there a way to similarly extract that?

  2. if that’s not possible and I can’t extract a custom style from the top css ie: shapeCategory(a grouping style) then instead of getting path, can I get grouped paths? I haven’t seen in the docs or convos how to get <g>, then it’s contents.

Thanks

2

ok so when i use “Export > Export As >” and select SVG like i always do in illustrator,
i usually use “Inline Style” for styling export preferences.
when i use “Internal CSS” i’ll get the following code: (example:)

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="1000" height="1500" viewBox="0 0 1000 1500">
    <defs>
        <style>
            .cls-1 {
                fill: #ff8600;
            }

            .cls-2 {
                fill: #7f87ff;
            }

            .cls-3 {
                fill: #9f8600;
            }

            .cls-4 {
                fill: #00368a;
            }

            .cls-5 {
                fill: #7fa7ff;
            }

            .cls-6 {
                fill: #ff9500;
            }
        </style>
    </defs>
    <circle id="ring_outer" class="cls-1" cx="932.5" cy="750" r="65" />
</svg>

etc…

i’ve searched for where that style tag info is stored, and one place i found it is in the svg’s xml tree through the ‘data’ that the SVGLoader supplies is

data.xml.ownerDocument.all[2].childNodes[0];

I know that that path’s source could change for different ways any xml would be generated (ie different export types or author’s structure)
i’m sure there’s a proper way around getting to that directly though. can’t find it.
any ideas?

in my console for that path, i get:

#text "
            .cls-1 {
                fill: #ff8600;
            }

            .cls-2 {
                fill: #7f87ff;
            }

            .cls-3 {
                fill: #9f8600;
            }

            .cls-4 {
                fill: #00368a;
            }

            .cls-5 {
                fill: #7fa7ff;
            }

            .cls-6 {
                fill: #ff9500;
            }
        "

i also can’t figure out how to use “#text” in anything variable-wise if i want to extract that syle info into an object in order to use in the mesh’s and objects i make from the svg data.

any help would be great in trying to understand this.
thanks

3

think i found a solution to this second question i had in github’s three.js issues with a working example using svg groups.
https://github.com/mrdoob/three.js/pull/16082#issuecomment-477780495