SVGシンボルで勾配を隠した

Question

私はSVGシンボルthis wayを使用していますが、SVGのdisplay:noneはグラフィックの勾配を隠しています。何か案が？以下の例では

、二つの円があるはずですが、赤いものが隠されている：あなただけwidth="0" height="0"を使用することができます

<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>

Answer 1

代わりのdisplay: noneを、。

<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>