Perché non è possibile fare riferimento a un gradiente lineare SVG definito in un file esterno (paint server)?

Question

Si prega di dare un'occhiata a questo Pen:

http://codepen.io/troywarr/pen/VYmbaa

Quello che sto facendo qui è:

• la definizione di un simbolo SVG (<symbol>)
• la definizione di un gradiente lineare SVG (<linearGradient>
• utilizzando l'elemento <use> per fare riferimento al simbolo SVG che ho creato
• nel CSS, definiscono due classi:
  • external, che fa riferimento al gradiente lineare definito this external .svg file (tasto destro del mouse e visualizza sorgente)
  • internal, che fa riferimento al gradiente lineare definito nel HTML locale (che è , io credo, in modo efficace identico a quello nel file esterno)

Perché io ho applicato la classe internal all'elemento <svg> in basso o Nell'esempio HTML, viene applicata la sfumatura, rendendo un segno di spunta gradiente blu. Questo è quello che sto cercando.

Ma, se si passa alla classe internal-external nell'esempio HTML, il segno di spunta non è più visibile:

http://codepen.io/troywarr/pen/vEymKX

Quando guardo scheda "Network" di Chrome ispettore, non vedo il browser sta tentando di caricare il file SVG. C'è un problema con la mia sintassi, o qualcos'altro sta succedendo qui?

E almeno sembra come sto facendo questo diritto, sulla base di alcuni riferimenti che ho trovato:

• http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
• http://www.w3.org/TR/SVG/linking.html#IRIReference
• https://stackoverflow.com/a/7118142/167911

Ma , nulla di ciò che ho provato finora mi ha permesso di fare riferimento a un gradiente lineare definito in un esterno .svg file.

Grazie per qualsiasi aiuto!

Answer 1

Dopo ulteriori ricerche, sembra che si tratti di un problema di supporto del browser. Vedi:

• https://code.google.com/p/chromium/issues/detail?id=109212
• https://bugs.webkit.org/show_bug.cgi?id=105904

Purtroppo, mi piacerebbe venire attraverso this question prima di pubblicare la mia, e aveva pensato che sicuramente, a 5-1/2 anni, il sostegno del browser avrebbe catturato su - ma non sembra essere il caso.

A partire dal 2015, a quanto pare Firefox e Opera sono gli unici due browser a sostenerlo in modo sostanziale.

Torna al tavolo da disegno ...

Answer 2

È possibile utilizzare svg4everybody con polyfill: true opzione, inserirà tutti i simboli esterni invece di use tag. Ma causerà il secondo svg caricamento.

Quindi è possibile scaricare svg utilizzando una richiesta Ajax e quindi inserirlo nella pagina nascondendo con gli stili.

<script>var ajax=new XMLHttpRequest;ajax.open("GET","/img/svg-sprite.svg",!0),ajax.send(),ajax.onload=function(a){var b=document.createElement("div");b.classList.add("hidden"),b.innerHTML=ajax.responseText,document.body.insertBefore(b,document.body.childNodes[0])};</script> 

In questo caso:

/img/svg-sprite.svg - è il vostro percorso svg.

.hidden stili di classe:

.hidden { 
    position: absolute !important; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
    clip: rect(1px, 1px, 1px, 1px); 
} 

E il codice potrebbe essere simile a questo:

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