5

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!

2
  • I think it's just that you need to change style="fill: url("#grC29M")"> to style="fill: url('#grC29M')"/> (diff. quotation marks, and closing slash). Aug 17, 2016 at 8:03
  • @MaxStarkenburg actually you don't want the inner quotes at all Aug 17, 2016 at 8:21

4 Answers 4

36

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

4
  • 1
    You saved my life (I was going crazy why my gradient was not working but just renaming it worked)
    – Berci
    Jul 13, 2021 at 11:46
  • 2
    Saved me a lot of heartache with this answer. This is an easy problem to run into if you're exporting SVGs from Figma since it reuses ids for gradients if they're in separate SVGs. Placing two of the affected SVGs on the same page will then cause the gradients to conflict. Sep 29, 2021 at 19:20
  • 5
    in my case (also exporting SVG from Figma) issue was in colon: #paint0_linear_5323:15541 -> #paint0_linear_5323
    – msdos
    Oct 22, 2021 at 17:04
  • There is a thing that few people are aware of. Adding id attributes in the DOM creates global variables in the window object. Try it for example, if you have an svg or a dom element with an id, type window.THE_ID in the inspector console and you'll see the element reference pop up. So, having the same id in the page overwrites the others.
    – Kev
    Mar 4, 2022 at 17:27
3
  • 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>

3
  • Hi, thanks for the answer, the SVG is composed of multiple path if you want I can insert it in the answer but I think that the gradient work indipendently from the path structure.Instead in my jquery code i have write linearGradient but in chrome developer tool is all lower case... why this behavior?
    – MarBer
    Aug 17, 2016 at 9:56
  • 1
    It's a Chrome bug Aug 17, 2016 at 10:11
  • 1
    The final solution that works is to avoid jQuery and set all server side by php. If anyone must use javascript or jQuery and no have alternatives I suggest this post link. Thanks to @Robert Longson for edit answer and for the help.
    – MarBer
    Aug 17, 2016 at 12:46
1

This was happening to me because there were multiple instances of the svg in the DOM(website), so each instance had the same id attribute being used. Eg:

id="grC29M" in the Original Question.

<lineargradient id="grC29M" x1="0%" y1="0%" x2="100%" y2="0%">

, this duplication of id caused unexpected behaviors. I believe this is the same reason why @cuddlemeister answer below worked. It looks like he changed the id for one of the instance because of which there was no duplication of id and the svg ended up rendering just fine.

In certain cases if the first instance of the svg is not rendered but present in dom, then also I could see this issue, however on hover or onclick if the first instance rendered then even the second instance of the svg rendered

0

In addition to other answers, in my case I was using gradientUnits as in:

<linearGradient id="gradient_default" x1="357" y1="-105" x2="84.811" y2="-20.2733" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFCC17"/>
<stop offset="1" stop-color="#FF6410"/>
</linearGradient>

It has to be capitalized correctly (capital "U"), as you would do for "linearGradient" with capital "G".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.