SVG style is not cascaded

[filantus]

Godot version

v4.0.beta10.official [d0398f62f]

System information

Windows 10, Vulkan API 1.3.224

Issue description

If there is several style rules for one element in SVG then will be applied only first from top.

Example:

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128">
    <style>
        line{
            stroke-width: 2px;
        }
        #vertical{
            stroke: red;
        }
        #horizontal{
            stroke: blue;
        }
    </style>
    <rect width="128" height="128" fill="gray" />
    <g id="vertical">
        <line x1="32" y1="0" x2="32" y2="512" />
        <line x1="64" y1="0" x2="64" y2="512" />
        <line x1="96" y1="0" x2="96" y2="512" />
    </g>
    <g id="horizontal">
        <line x1="0" y1="32" x2="512" y2="32" />
        <line x1="0" y1="64" x2="512" y2="64" />
        <line x1="0" y1="96" x2="512" y2="96" />
    </g>
</svg>

In chromium based browsers that svg is displayed normal.

In Godot lines not shown at all. Because probably when applied first rule with stroke-width then other rules not have affect and lines haven't color so they are invisible.

Steps to reproduce

Just save this svg file and open in Godot.

Minimal reproduction project

mrp.zip

[Calinou]

This is likely an issue within ThorVG, rather than Godot. See https://github.com/Samsung/thorvg/issues/702.

[capnm]

Yes, id selectors are not supported → CSS-Support-in-SVG You can use classes instead:

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128">
    <style>
        line{
            stroke-width: 2px;
        }
        .vertical{
            stroke: red;
        }
        .horizontal{
            stroke: blue;
        }
    </style>
    <rect width="128" height="128" fill="gray" />

    <g class="vertical">
        <line x1="32" y1="0" x2="32" y2="512" />
        <line x1="64" y1="0" x2="64" y2="512" />
        <line x1="96" y1="0" x2="96" y2="512" />
    </g>
    <g class="horizontal">
        <line x1="0" y1="32" x2="512" y2="32" />
        <line x1="0" y1="64" x2="512" y2="64" />
        <line x1="0" y1="96" x2="512" y2="96" />
    </g>
</svg>