Gradients hidden using SVG symbols

Question

I am using SVG symbols this way, but the display:none of the SVG is hidden the gradients of the graphic. Any idea?

In the example below, there should be two circles, but the red one is hidden:

<svg xmlns="http://www.w3.org/2000/svg" style='display:none' >
  <defs>
    <style>.red-gradient{fill:url(#gradient)}</style>
    <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
       <stop offset="0%" stop-color="red"/>
       <stop offset="100%" stop-color="darkred"/>
    </linearGradient>
  </defs>
  <symbol id="mysymbol" viewBox="0 0 100 100">
    <circle class="red-gradient" cx="0" cy="50" r="50" />
    <circle fill="green" cx="100" cy="50" r="50" />
  </symbol>
 </svg>

<svg><use xlink:href="#mysymbol" /></svg>

I've come across this issue in the past. The `display: none` does affect gradients. Solution is to use other methods to hide the first SVG instead of using `display: none`. I am trying to find a credible source, will post answer if I manage to find it. — Harry, Nov 12 '16 at 12:48
This seems to be a bug though. This is what the spec says - *‘linearGradient’ elements are available for referencing even when the ‘display’ property on the ‘linearGradient’ element or any of its ancestors is set to none*. But the issue is there in Firefox also. — Harry, Nov 12 '16 at 13:08

score 7 · Accepted Answer · edited Nov 12 '16 at 18:08

Instead of display: none, you can just use width="0" height="0".

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="display:block">
  <defs>
    <style>.red-gradient{fill:url(#gradient)}</style>
    <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
       <stop offset="0%" stop-color="red"/>
       <stop offset="100%" stop-color="darkred"/>
    </linearGradient>
  </defs>
  <symbol id="mysymbol" viewBox="0 0 100 100">
    <circle class="red-gradient" cx="0" cy="50" r="50" />
    <circle fill="green" cx="100" cy="50" r="50" />
  </symbol>
 </svg>

<svg><use xlink:href="#mysymbol" /></svg>

Nice. Add a display:block to the first SVG, to avoid unwanted spaces. http://codepen.io/anon/pen/bBpeZb — DanielBlazquez, Nov 12 '16 at 13:33

Gradients hidden using SVG symbols

1 Answers1

Linked