Strange colors in .toSVG icons

[CrzongA]

This is not a bug report, it is more of a request for help.

I am using the .toSVG() method to output SVG to my project, which I use them to display operator icons. However, as shown in the pic below, some (only some!) of the icons have entire layers changed to green.

What's even stranger is that when I copy the svg string rendered in my project to another html file and try to display it directly, the svg's colors is normal again!

I am not sure if this is reproducible on other people's browsers.

I am using React to render the page. The relevant code is as below:

    loadOps(){
        let att=[], def=[]
        Object.keys(ops).forEach(item => {
            // console.log(ops[item].toSVG())
            if (ops[item].role=="Attacker" ) {
                att.push(
                        <div
                            key={ops[item].id}
                            className={"op"}
                            style={{order:ops[item].index}}
                            dangerouslySetInnerHTML={{__html: ops[item].toSVG({class: "op"})}}
                        />
                )
            }else if (ops[item].role=="Defender"){
                def.push(
                    <div
                        key={ops[item].id}
                        className={"op"}
                        style={{order:ops[item].index}}
                        dangerouslySetInnerHTML={{__html: ops[item].toSVG({class: "op"})}}
                    />
                )

            }
        })
        return(
            <div>
                <div className={"osm-sub divider"}>
                    <p>Attackers</p>
                    {att}
                </div>
                <div className={"osm-sub"}>
                    <p>Defenders</p>
                    {def}
                </div>
            </div>
        )
    }

[CrzongA]

I think I have found the cause of the issue.

By looking into the .svg files themselves, I noticed that across multiple .svg files the same id is being used on the radialGradient element. (For example, Blitz's yellow radialGradient layer has an id of "b", and the same id "b" is used in Twitch's corresponding layer as well.) This caused the styles defined in the first .svg to be loaded into a webpage, and later being applied on all radialGradient layers in other .svgs. In my case,

I then looked into your demo page's source code to figure out why doesn't the same issue happens on your page, where multiple operator icons are also loaded in the same page. Turns out you have predefined a set of linearGradient values in a svg element with the id "SVG_SPRITE_NODE", each with an unique id that corresponds to that operator's icons.

I guess you (unintentionally?) shortened the id for those gradient layers when exporting icons individually, which would work if only one of all operator icons is loaded on a page, but once there are more than one icons being loaded simultaneously the "corrupted color" issues I mentioned in the previous comment would occur.

None of the techniques you implemented in your own page, or issues that would occur if exported otherwise have been explored or documented.

Could you please change the id used in the radialGradient layers of all operator icons from the likes of "a" to "amaru_a", a globally consistent id naming convention which you have already implemented in your own demo page.

Thanks!

[marcopixel]

Should be fixed with Release 1.1.3, sorry for any inconvenience because of my slow response.

Also why it's working on the preview website, it seems the plugin used for the SVG sprites does it's own prefixing so i've never noticied it 🤷.