SVG linear-gradient fill works on desktop view but not on mobile. How can I fix this?

Question

So I have a logo for a website I'm making with React and Express. The SVG path is returned from a function which is called in both Desktop and Mobile components. Here's my default.css (which stands for default style, applied to both mobile and desktop, I'm only changing color stuff here.

svg {
    fill: url(#logo-gradient);
}
#logo-gradient {
    --color-stop-1: rgba(242, 68, 132, 1);
    --color-stop-2: rgba(237, 136, 173, 1);
    --color-stop-3: #fbbed4;

}

Here's how it works well on Desktop view:

Not working on Mobile:

However, if I use fill: red; it shows on mobile as expected, of course, in red:

I have no idea what could be wrong, It should just work. Any help would be appreciated!

Edit: Responding to "somethinghere", I thought it would be irrelevant to include svg code since it's returned by a function and the same function is called on both mobile and desktop components... But here it is:

getLogo = () => {
    return   (
        <svg
        viewBox="0 0 250 50"
        width="250"
        height="50"
        version="1.1"
        id="svg3785">
            <defs>
                <linearGradient id="logo-gradient">
                    <stop offset="0%" stop-color="var(--color-stop-1)" />
                    <stop offset="77%" stop-color="var(--color-stop-2)" />
                    <stop offset="100%" stop-color="var(--color-stop-3)" />
                </linearGradient>
            </defs>
            <path d="M 17.699219 8.7597656  ... really long path"/>
        </svg>
    )
}

And in component (including only parent divs):

<div className="logo-container">
    {this.getLogo()}
</div>

And for the Mobile:

<div className="nav-resp-logo-container">
    {this.getLogo()}
</div>

Answer 1

I have tried to simplify your code to something testable, and it all seems to be working fine across devices on my end:

 :root { --g1: red; --g2: green; --g3: blue; } #definitions { position: fixed; top: 0; left: 0; transform: translate(-100%,-100%); opacity: 0; pointer-events: none; } #logo text { fill: url(#logo-gradient); }

 <svg viewBox="0 0 250 50" width="250" height="50" id="definitions" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="logo-gradient"> <stop offset="0%" stop-color="var(--g1)" /> <stop offset="77%" stop-color="var(--g2)" /> <stop offset="100%" stop-color="var(--g3)" /> </linearGradient> </defs> </svg> <svg id="logo" viewBox="0 0 250 50" width="250" height="50" xmlns="http://www.w3.org/2000/svg"> <text x="0" y="40" style="font-size: 40px; font-weight: bold;">Hello World</text> </svg>

Which means your problem might not be in the code you are showing us. Maybe the logo is accidentally hidden on mobile? What browsers are you testing this on? Which devices?

The only advice I could give your is to ensure that you have a defined XMLNS , or XML namespace. If you do not, funky things can happen on certain browsers - mostly older ones. So make sure your <svg> tags at least contain this:

xmlns="http://www.w3.org/2000/svg"