Collegamento a CSS in un SVG incorporato da un tag IMG

Ho una pagina, che include diversi file SVG. Per sincronizzare lo stile di quei file SVG, volevo creare un singolo foglio di stile per contenere tutte le informazioni sullo stile.Collegamento a CSS in un SVG incorporato da un tag IMG

Tuttavia, quando si include SVG come sotto, il CSS non verrà applicato. Chiunque abbia una soluzione a questo o semplicemente non è possibile collegarsi ad altri file (CSS) in un SVG a cui fa riferimento <img src="..." />?

Vedere il codice di esempio seguente. Quando si carica pic.svg direttamente nel browser, tutti gli stili vengono applicati e si può vedere un rettangolo verde. Ma quando si apre page.htm tutto quello che c'è da vedere è un rettangolo nero. Quindi ovviamente nessuno degli stili definiti è stato applicato.

page.htm

<!DOCTYPE html> 
<html> 
<body> 
    <img src="pic.svg" style="width: 100px; height: 100px;" /> 
</body> 
</html>

pic.svg

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<?xml-stylesheet type="text/css" href="styles.css" ?> 
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 100 100" 
    > 
    <rect x="10" y="10" width="80" height="80" /> 
</svg>

styles.css

rect { 
    stroke: black; 
    fill: green; 
}

EDIT

Da una risposta, che per un breve periodo è apparso qui, ho ottenuto this link to the spec e la seguente citazione. A mio avviso questo afferma che il codice sopra dovrebbe funzionare!

stand-alone di documenti SVG incorporato in un documento HTML o XML con il 'IMG', 'oggetto' (HTML) o 'immagine' (SVG) elementi

[...]

Citando dal tuo link "I fogli di stile definiti in qualsiasi punto all'interno del documento SVG riferimento (in elementi di stile o attributi di stile, o nei fogli di stile esterni collegati con il foglio di stile istruzione di elaborazione) applicare in tutta l'intero documento in formato SVG, ma non a sfoglia il documento di riferimento (forse HTML o XHTML). "

fonte

2012-09-25 Sirko

Per motivi di privacy le immagini devono essere file standalone. Puoi usare i CSS se codi il foglio di stile come dati uri. Per esempio.

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<?xml-stylesheet type="text/css" href="data:text/css;charset=utf-8;base64,cmVjdCB7IA0KICAgIHN0cm9rZTogYmxhY2s7DQogICAgZmlsbDogZ3JlZW47DQp9" ?> 
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 100 100" 
    > 
    <rect x="10" y="10" width="80" height="80" /> 
</svg>

Ci sono vari online converters per URI di dati.

fonte

2012-09-25 15:09:37

In tal caso, avrei nuovamente una definizione di stile per file SVG. E come si collega all'estratto di specifiche che ho postato? – Sirko

Se si desidera condividere le definizioni di stile non è possibile utilizzare i tag immagine. I problemi di sicurezza tendono a sovrascrivere i requisiti delle specifiche che generalmente non considerano tali cose. –

Apparentemente, questo significa anche che non è possibile fare riferimento a font esterni da file SVG caricati tramite un file HTML. –

Un'alternativa è quella di utilizzare il tag <object> nel tuo html: -

<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>

E 'un peccato il tag BIG <img> non funzionerà. Non voglio rovinare l'hacking con la conversione di SVG in un URI di dati. Ha a che fare con le vulnerabilità tra i siti sul caricamento indiretto delle risorse e l'uso di un "Open Redirector".

Nota che nei miei test di ieri, il metodo di tag <img> FUNZIONA in IE10, ma né Chrome né FireFox.

Non so perché è consentito <object> e <img> non lo è. Una svista?

fonte

2013-08-23 09:24:14

Nessuna supervisione, riguarda le aspettative generali delle persone riguardo alle capacità di un'immagine, cioè quello che vedi è ciò che è ogni volta. Il tag dell'oggetto ha sempre consentito il contenuto complesso per script. –

Mi piace molto questa risposta, ottenere un font da mostrare nel mio SVG mi sta facendo impazzire per tutto il giorno! Grazie! ... comunque come lo hai scritto, ha rotto il resto del mio codice HTML fino a quando non l'ho chiuso come 'height =" 100 ">' necessario un tag di chiusura per qualche motivo: http://scrabblehack.com/ –

Leon: Grazie. Ho aggiornato l'esempio di conseguenza. –

Collegamento a CSS in un SVG incorporato da un tag IMG

risposta

Problemi correlati