Linear gradient in SVG symbol

Question

I have a svg sprite with <symbol> trhat contains a <linearGradient>. I am filing a <g> in this same <symbol> with this gradient by fill="url(#id)". However, when I load the <symbol> with <use> in other document, the <linearGradient> does not load. I can see the fill's url is referring to an absolute route instead of inside the document and not load correctly.

How can I load a <linearGradient> in a <symbol>?

<symbol viewBox="0 0 550 90" width="100%" height="100%">
    <defs>
        <linearGradient id="gradient">
            <stop offset="-1.04974" stop-color="#D8D8D8">
                <animate attributeName="offset" values="-2; 1" dur="1s" repeatCount="indefinite"></animate>
            </stop>
            <stop offset="-0.549739" stop-color="#EEEEEE">
                <animate attributeName="offset" values="-1.5; 1.5" dur="1s" repeatCount="indefinite"></animate>
            </stop>
            <stop offset="-0.0497395" stop-color="#D8D8D8">
                <animate attributeName="offset" values="-1; 2" dur="1s" repeatCount="indefinite"></animate>
            </stop>
        </linearGradient>
    </defs>
    <g fill="url(#gradient)">
        <rect x="0" y="0" width="100" height="15"/> 
        <rect x="10" y="25" width="130" height="15" />                              
    </g>
</symbol>

Don't put the linearGradient in the symbol, move it outside the element. — Robert Longson, Sep 21 '18 at 08:32

score 8 · Answer 1 · answered Apr 26 '19 at 13:27

8

For me, I had display: none on my <svg> tag that contained my <defs> and <symbols>.

Make sure that initial svg does not have display:none set - use height: 0; width: 0; position: absolute; visibility: hidden instead.

Also as noted in Waruyama's answer, make sure the <defs> are outside of the <symbol> tag.

Found this hint here.

answered Apr 26 '19 at 13:27

Jarvis Johnson

424
6
10

1

Thank you. This was driving me crazy because I could see that it worked fine when display:none wasn't set, but I was trapped in linear (no pun intended) thinking. – Kevin Apr 25 '21 at 03:56
1

Just removing ```display: none``` and not taking `````` out of `````` worked for me. I had this issue only in Chrome 90 – Nasia Makrygianni May 10 '21 at 13:29
1

Both `display: none` and `visibility: hidden` didn't work for me, only the `position`, `height` and `width` rules mad it in Safari 14.1 and Chrome 91. In Firefox 89 any solution works fine. Moving the `` tags outside the `` tag didn't change anything, inside and outside worked both. – Daniel Scharkov Jul 02 '21 at 01:03

score 0 · Answer 2 · answered Sep 21 '18 at 12:32

As pointed out in the comments, place the linearGradient outside the symbol.

Here is a modified example that works:

<svg style="visibility:hidden; width: 0; height: 0;">
  <defs>
    <linearGradient id="gradient">
        <stop offset="-1.04974" stop-color="#D8D8D8">
            <animate attributeName="offset" values="-2; 1" dur="1s" repeatCount="indefinite"></animate>
        </stop>
        <stop offset="-0.549739" stop-color="#EEEEEE">
            <animate attributeName="offset" values="-1.5; 1.5" dur="1s" repeatCount="indefinite"></animate>
        </stop>
        <stop offset="-0.0497395" stop-color="#D8D8D8">
            <animate attributeName="offset" values="-1; 2" dur="1s" repeatCount="indefinite"></animate>
        </stop>
    </linearGradient>
    <symbol id="symbol1" viewBox="0 0 550 90" width="100%" height="100%">
      <g fill="url(#gradient)">
        <rect x="0" y="0" width="100" height="15"/> 
        <rect x="10" y="25" width="130" height="15" />                              
      </g>
    </symbol>
  </defs> 
</svg>


<svg width="400" height="400">
  <use xlink:href="#symbol1"></use>
</svg>

This code does not work for me when I load the `use` in another file. — Andrés, Sep 24 '18 at 09:25

Linear gradient in SVG symbol

2 Answers2