Comment appliquer un style à un intégrés SVG?

Quand un SVG est directement inclus dans un document à l'aide de la <svg> balise, vous pouvez appliquer des styles CSS pour le SVG via le document de la feuille de style. Cependant, je suis en train d'appliquer un style à un SVG qui est incorporé (à l'aide de la <object> tag).

Est-il possible de se servir de quelque chose comme le code suivant?

object svg { 
    fill: #fff; 
}

Je suis venu avec une légère façon de faire ce qui serait idéal pour ce que vous essayez de faire. Voir ce Q&A: stackoverflow.com/questions/11978995/...
Voici réponse qui a effectivement fait le travail (à partir de la Manipulation externe svg fichier de propriétés de style avec CSS.)

InformationsquelleAutor Joshua Sortino | 2011-02-05

104

Réponse courte: non, car les styles ne s'appliquent pas à travers les limites du document.

Cependant, puisque vous avez un <object> tag vous pouvez insérer la feuille de style dans le document svg à l'aide d'un script.

Quelque chose comme cela, et notez que ce code suppose que le <object> a chargé entièrement:
```
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);
```
Il est également possible d'insérer un <link> élément pour faire référence à une feuille de style externe:
```
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);
```
Encore une autre option est d'utiliser la première méthode, pour insérer un élément de style, et puis ajouter un @import de la règle, de l'e.g styleElement.textContent = "@import url(my-style.css)".

Bien sûr, vous pouvez directement le lien vers la feuille de style à partir du fichier svg trop, sans faire de script. De la façon suivante devrait fonctionner:
```
<?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>
```
ou:
```
<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>
```
Mise à jour 2015: vous pouvez utiliser jquery-svg plugin pour appliquer les scripts javascript et feuilles de style css intégré SVG.
- Est-ce une méthode pour lier une feuille de style externe? Si non, est-ce possible?
- Le ci-dessus insère un élément de style dans le svg. Oui, il est possible d'insérer un lien xhtml élément de trop pour lier une feuille de style externe, ou peut-être un xml-stylesheet instruction de traitement (voir la section w3.org/Style/styling-XML.html).
- C'est assez impressionnant Erik! Cependant, je ne parvenais pas à obtenir ce truc fonctionne dans Chrome sans svgweb: code.google.com/p/svgweb ...une idée de ce que je fais de mal?
- vous devriez probablement juste ouvrir une nouvelle question pour que. Svgweb n'est pas nécessaire dans chrome.
- Merci Erik, a vraiment du mal à essayer d'obtenir de la police face à des travaux en svg par css, reliant le css dans le svg a travaillé d'abord essayer et miraculeusement de la croix-navigateur!
- La ligne var svgDoc = yourObjectElement.contentDocument; renvoie la valeur null. La seule façon que j'ai réussi à obtenir ce travail a été avec une charge d'écoute sur l'Élément et à l'intérieur de d'obtenir les contentDocument comme illustré ici: stackoverflow.com/questions/2753732/...
InformationsquelleAutor Erik Dahlström
9

Vous pouvez le faire sans javsscrpt en mettant un bloc de style avec vos styles à l'intérieur du fichier SVG lui-même.
```
<style type="text/css">
 path,
 circle,
 polygon { 
    fill: #fff; 
  }
</style>
```
InformationsquelleAutor R Reveley
2

Si la seule raison de l'aide de la balise pour les suivants le SVG, c'est que vous ne voulez pas encombrer votre code source avec le balisage du SVG, vous devriez jeter un oeil à SVG injecteurs comme SVGInject.

SVG injection utilise Javascript pour injecter un fichier SVG inline dans votre document HTML. Cela permet de nettoyer le code source HTML, tout en rendant le SVGs entièrement styleable avec les CSS. Un exemple de base ressemble à ceci:
```
<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
```
InformationsquelleAutor Waruyama

Vous devez vous connecter pour publier un commentaire.