Verläufe mit SVG-Symbolen versteckt

Ich verwende SVG-Symbole this way, aber die display:none des SVG ist die Farbverläufe der Grafik versteckt. Irgendeine Idee?Verläufe mit SVG-Symbolen versteckt

Im Beispiel unten, sollte es zwei Kreise, aber die rote versteckt:

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

Quelle

2016-11-12 Daniel G. Blázquez

Ich habe in der Vergangenheit über dieses Problem kommen. Das 'display: none' wirkt sich nicht auf Farbverläufe aus. Lösung besteht darin, andere Methoden zu verwenden, um das erste SVG auszublenden, anstatt 'display: none' zu verwenden. Ich versuche eine glaubwürdige Quelle zu finden, werde die Antwort posten, wenn es mir gelingt, sie zu finden. – Harry

Dies scheint jedoch ein Fehler zu sein. Dies ist, was die Spezifikation sagt - * "linearGradient" -Elemente sind für die Referenzierung verfügbar, auch wenn die Eigenschaft 'display' auf dem Element 'linearGradient' oder einem seiner Vorgänger auf 'none * gesetzt ist. Aber das Problem ist auch in Firefox. – Harry

Statt display: none, die Sie gerade width="0" height="0" verwenden können.

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

Quelle

2016-11-12 13:01:01

Schön. Fügen Sie eine Anzeige hinzu: Blockieren Sie das erste SVG, um unerwünschte Leerzeichen zu vermeiden. http://codepen.io/anon/pen/bBpeZb –

Verläufe mit SVG-Symbolen versteckt

Antwort

Verwandte Themen