Come applicare uno stile a un SVG incorporato?

107

Quando un SVG viene incluso direttamente in un documento utilizzando il <svg>tag, puoi applicare gli stili CSS all'SVG tramite il foglio di stile del documento. Tuttavia, sto cercando di applicare uno stile a un SVG incorporato (utilizzando il <object>tag).

È possibile utilizzare qualcosa come il codice seguente?

object svg { 
    fill: #fff; 
}

html css svg

— Joshua Sortino
fonte

Ho escogitato un modo leggero per farlo che funzionerebbe alla grande per quello che stai cercando di fare. Guarda questa domanda e risposta

— Drew Baker

Ecco una risposta che effettivamente porta a termine il lavoro (dalla manipolazione delle proprietà di stile del file svg esterno con CSS .)

— Fabien Snauwaert

Risposte:

108

Risposta breve: no, poiché gli stili non si applicano oltre i confini del documento.

Tuttavia, poiché hai un <object>tag, puoi inserire il foglio di stile nel documento svg usando lo script.

Qualcosa di simile e nota che questo codice presuppone che <object>sia stato caricato completamente:

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

È anche possibile inserire un <link>elemento per fare riferimento a un foglio di stile esterno:

var svgDoc = yourObjectElement.contentDocument;
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
linkElm.setAttribute("href", "my-style.css");
linkElm.setAttribute("type", "text/css");
linkElm.setAttribute("rel", "stylesheet");
svgDoc.getElementById("where-to-insert").appendChild(linkElm);

Un'altra opzione è usare il primo metodo, inserire un elemento di stile e quindi aggiungere una regola @import, ad es styleElement.textContent = "@import url(my-style.css)".

Ovviamente puoi anche collegarti direttamente al foglio di stile dal file svg, senza fare alcuno script. Uno dei seguenti dovrebbe funzionare:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg">
  ... rest of document here ...
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <link href="my-style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>
  </defs>
  ... rest of document here ...
</svg>

Aggiornamento 2015: puoi utilizzare il plugin jquery-svg per applicare gli script js e gli stili css a un SVG incorporato.

— Erik Dahlström
fonte

È un metodo per collegare un foglio di stile esterno? In caso contrario, è possibile?

— Joshua Sortino

Quanto sopra inserisce un elemento di stile nel file svg. Sì, è possibile inserire anche un elemento di collegamento xhtml per il collegamento a un foglio di stile esterno, o possibilmente un'istruzione di elaborazione del foglio di stile xml (vedere w3.org/Style/styling-XML.html ).

— Erik Dahlström

Questo è davvero fantastico Erik! Tuttavia, non sono riuscito a far funzionare questo trucco in Chrome senza includere svgweb: code.google.com/p/svgweb ... Qualche idea su cosa sto facendo di sbagliato?

— Matt WD

@ MattW-D: probabilmente dovresti semplicemente aprire una nuova domanda per questo. Svgweb non è necessario in Chrome.

— Erik Dahlström

Grazie Erik, stavo davvero lottando cercando di far funzionare font-face in svg tramite css, collegando il css allo svg ha funzionato al primo tentativo e miracolosamente cross browser!

— Dave

Puoi farlo senza javsscrpt inserendo un blocco di stile con i tuoi stili all'interno del file SVG stesso.

<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>

— R Reveley
fonte

Se l'unico motivo per utilizzare il tag per includere SVG è che non vuoi ingombrare il tuo codice sorgente con il markup dell'SVG , dovresti dare un'occhiata agli iniettori SVG come SVGInject .

L'iniezione SVG utilizza Javascript per iniettare un file SVG in linea nel documento HTML. Ciò consente un codice sorgente HTML pulito e allo stesso tempo rende gli SVG completamente stilizzabili con CSS. Un esempio di base è simile a questo:

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

— Waruyama
fonte

Eccezionale! Grazie per lo strumento accurato.

— Deleplace