web-dev-qa-db-fra.com

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

Lorsqu'un fichier SVG est directement inclus dans un document à l'aide de la commande <svg>, vous pouvez appliquer des styles CSS au SVG via la feuille de style du document. Cependant, j'essaie d'appliquer un style à un fichier SVG incorporé (à l'aide de la commande <object> tag).

Est-il possible d'utiliser quelque chose comme le code suivant?

object svg { 
    fill: #fff; 
}
htmlcsssvg
102
Joshua Sortino

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

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

Quelque chose comme ça, et notez que ce code suppose que le <object> A été chargé:

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 élément <link> Pour référencer 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);

Une autre option consiste à utiliser la première méthode, à insérer un élément de style, puis à ajouter une règle @import, par exemple styleElement.textContent = "@import url(my-style.css)".

Bien sûr, vous pouvez également créer un lien direct vers la feuille de style à partir du fichier svg, sans faire de script. L’un des éléments suivants 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>

Update 2015: vous pouvez utiliser le plugin jquery-svg pour appliquer des scripts js et des styles css à un fichier SVG intégré.

104
Erik Dahlström

Vous pouvez le faire sans javsscrpt en plaçant un bloc de style avec vos styles dans le fichier SVG lui-même.

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

Si la seule raison d'utiliser la balise pour inclure le SVG est que vous ne voulez pas encombrer votre code source avec le balisage du SVG, vous devriez jeter un coup d'œil aux injecteurs SVG tels que SVGInject .

L'injection SVG utilise Javascript pour injecter un fichier SVG en ligne dans votre document HTML. Cela permet un code source HTML propre tout en rendant les SVG entièrement stylables avec 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>
2
Waruyama