Includi file SVG in SVG

Ho un linearGradient nella sezione defs del mio file SVG e lo riferimento con fill = "url (#myGradientName)". Funziona benissimo finora.Includi file SVG in SVG

Penso che dovrei essere in grado di mettere la mia intera sezione di difetti nel proprio file SVG, e quindi basta fare riferimento a quello di tutte le mie immagini SVG. Cioè, qualcosa di simile a:

styles.svg:

<svg xmlns=...> 
    <defs> 
    <linearGradient id="myGradient" ...> 
    </linearGradient> 
    </defs> 
</svg>

image.svg:

<svg xmlns=...> 
    <rect width="100" height="100" fill="styles.svg#myGradient"/> 
</svg>

Ma io non riesco a ottenere lo stile da applicare. Ho la sintassi sbagliata per gli ID esterni a questo file (styles.svg # myGradient)? Devo includere esplicitamente il file prima in qualche modo?

Mi sono riversato sulle specifiche SVG e sembra che questo dovrebbe essere possibile, ma nessuno degli esempi mostra che è stato fatto.

Modifica: lo FOP FAQ suggerisce che la sintassi corretta è fill = "url (grad.svg # PurpleToWhite)", ma che non funziona in Gecko o Webkit. È corretto e nessuno lo supporta, o sto facendo qualcos'altro di sbagliato?

fonte

2009-03-16 Ken

Correlato: https://stackoverflow.com/questions/20459685/how-do-i-use-svg-patterns-in-a-cross-browser-consistent-way – leo

Sembra che questo sia supportato solo in Firefox 3.1.

fonte

2009-03-16 21:00:20 Ken

Qualsiasi informazione su Opera o Webkit/Safari/Cromo? – Boldewyn

La domanda diceva che non funziona in Webkit. Non l'ho provato in Opera, ma Gecko sembra avere il supporto SVG più funzionale in altre aree, quindi sarei sorpreso se Opera (e nessun altro) lo supportasse. – Ken

[Questo bug Webkit mostra] (https://bugs.webkit.org/show_bug.cgi?id=12499) che questo comportamento errato non è ancora risolto nelle versioni attuali di Chrome/Safari.Un sacco di lamentele sul rapporto di correzione a lungo termine, ma il problema è ** non risolto ** e l'ultimo manutentore ha abbandonato il progetto a causa di un conflitto di interessi .. Ottimo ... –

In realtà, le domande frequenti sulla FOP sono corrette, la sintassi corretta sta abbracciando l'URI con url(...). Appena controllato con il mio Firefox, e gestisce i riempimenti solo con circostante url(). Sarebbe un bug in Safari o Opera, se l'avessi gestito diversamente.

Per coincidenza ho archiviato uno similar question, ma con altrettanto poco successo.

Cheers,

fonte

2009-07-09 19:11:56 Boldewyn

Si ha bisogno di dire fill="url(styles.svg#myGradient)". Funziona in Firefox 4 beta 6 e immagino funzioni su Firefox 3.5. Ma Chrome (7.0.517.41 beta) e IE9 beta (9.0.7930.16406) non lo supportano ancora. Sembra che entrambi cerchino #myGradient nel documento corrente invece di andare effettivamente all'URL specificato. Schifoso.

Qui ci sono i file completi che ho usato per testare questo:

styles.svg

<svg xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <linearGradient id="myGradient"> 
     <stop offset="0" stop-color="red" /> 
     <stop offset="1" stop-color="black" /> 
    </linearGradient> 
    </defs> 
</svg>

image.svg

<svg xmlns="http://www.w3.org/2000/svg"> 
    <rect width="100" height="100" fill="url(styles.svg#myGradient)"/> 
</svg>

fonte

2010-10-18 16:18:15

Puoi farlo, ma questo significherebbe il tuo il gradiente sarebbe specificato in linea con il documento SVG. E se volessi sfumature diverse su più ripetizioni della stessa icona SVG? –

@MichaelGiovanniPumo Sembra una domanda diversa. Non conosco la risposta a mano. Forse ['fill =" currentColor "'] (http://www.w3.org/TR/SVG11/painting.html#SpecifyingPaint) sarebbe d'aiuto. Se stai includendo un'icona SVG ripetutamente usando '' o '

risposta

Problemi correlati