SVG gradient not working

Question

I've a svg and I need to fill it with a gradient, the css is added by a script, if U work with a single RGB color it all work fines but with a gradient the SVG results in a white background.

The result code after the script:

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
id="Livello_1" x="0px" y="0px" viewBox="0 0 70 70" 
style="enable-background:new 0 0 70 70;width: 50px; height: 50px;" 
xml:space="preserve">
<defs>
  <lineargradient id="grC29M" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(88,88,88);stop-opacity:1"></stop>
    <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop>
    </lineargradient>
</defs>

<path class="st0" d="......" style="fill: url("#grC29M")">
</svg>

Thanks!

Solution 1

I had a very strange bug in chrome when this gradient didn't work

<svg width="442" height="249" viewBox="0 0 442 249" fill="none" xmlns="http://www.w3.org/2000/svg">
    <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="442" height="249">
        <path
            d="M225.158 123.903H441.656C401.021 94.5929 319.085 35.7055 316.42 34.6397C313.089 33.3074 151.215 0 148.551 0C146.419 0 71.2778 15.5434 33.9735 23.3152L0 145.886C8.88197 178.75 28.1114 245.275 33.9735 248.473C41.3011 252.47 97.2575 232.485 115.243 230.487C129.632 228.888 194.515 158.765 225.158 123.903Z"
            fill="#C4C4C4" />
    </mask>
    <g mask="url(#mask0)">
        <path
            d="M49.8681 219.88C42.8755 215.861 40.5446 206.754 44.6687 199.578C48.7928 192.403 57.8357 189.833 64.8283 193.852C71.8209 197.871 74.1518 206.978 70.0277 214.154C65.9037 221.329 56.8607 223.899 49.8681 219.88ZM60.0531 202.16C57.5288 200.709 54.2499 201.646 52.7639 204.231C51.2779 206.817 52.1191 210.121 54.6434 211.572C57.1677 213.023 60.4466 212.086 61.9326 209.501C63.4186 206.915 62.5774 203.611 60.0531 202.16Z"
            fill="url(#gradient1)" />
        <path
            d="M127.776 283.054C125.861 281.954 124.95 279.575 125.754 277.371C126.65 274.871 129.337 273.555 131.775 274.416C187.265 293.788 249.429 269.847 279.55 217.441C313.928 157.627 294.543 81.7525 236.31 48.2827C178.077 14.8128 102.787 36.272 68.4251 96.0567C53.5818 121.882 48.2006 152.064 53.2367 181.045C53.6857 183.622 51.9799 186.119 49.4165 186.617C46.8531 187.115 44.4166 185.444 43.9677 182.867C38.5354 151.687 44.3513 119.205 60.33 91.404C97.3008 27.0127 178.413 3.95305 241.085 39.9744C303.758 75.9957 324.662 157.69 287.662 222.065C255.237 278.48 188.329 304.293 128.534 283.413C128.286 283.309 128.037 283.204 127.776 283.054Z"
            fill="url(#gradient2)" />
    </g>
    <defs>
        <linearGradient id="gradient1" x1="157" y1="24.5" x2="157" y2="248.5" gradientUnits="userSpaceOnUse">
            <stop stop-color="#FF8B00" />
            <stop offset="1" stop-color="#FF8B00" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="gradient2" x1="175" y1="22.5" x2="175" y2="238.5" gradientUnits="userSpaceOnUse">
            <stop stop-color="#FF8B00" />
            <stop offset="1" stop-color="#FF8B00" stop-opacity="0" />
        </linearGradient>
    </defs>
</svg>

until I've changed the ids from paint0_linear and paint1_linear to gradient1 and gradient2.

Quite a strange issue, but maybe this will help someone

Solution 2

• It's linearGradient with a capital G
• the inner quotes in the url are invalid
• the path needs to be closed

Since you didn't provide the path's d attribute I've replaced it with a rect.

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 70" 
style="width: 50px; height: 50px;" 
xml:space="preserve">
<defs>
  <linearGradient id="grC29M" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:rgb(88,88,88);stop-opacity:1"></stop>
    <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop>
    </linearGradient>
</defs>

<rect width="100%" height="100%" style="fill: url(#grC29M)"/>
</svg>