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

107

Lorsqu'un SVG est directement inclus dans un document à l'aide de la <svg>balise, vous pouvez appliquer des styles CSS au SVG via la feuille de style du document. Cependant, j'essaie d'appliquer un style à un SVG qui est intégré (en utilisant la <object>balise).

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

object svg { 
    fill: #fff; 
}

html css svg Joshua Sortino
la source

J'ai trouvé un moyen léger de faire cela qui fonctionnerait très bien pour ce que vous essayez de faire. Voir cette Q&A: stackoverflow.com/questions/11978995/…

Drew Baker

Voici une réponse qui fait vraiment le travail (de la manipulation des propriétés de style de fichier svg externe avec CSS .)

Fabien Snauwaert

Réponses:

108

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

Cependant, puisque vous avez une <object>balise, 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 chargé complètement:

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 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 encore 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 vers la feuille de style à partir du fichier svg, sans faire de script. L'un ou l'autre 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>

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

Erik Dahlström
la source

Est-ce une méthode pour lier une feuille de style externe? Sinon, est-ce possible?

Joshua Sortino

Ce qui précède insère un élément de style dans le svg. Oui, il est également possible d'insérer un élément de lien xhtml pour créer un lien vers une feuille de style externe, ou éventuellement une instruction de traitement xml-stylesheet (voir w3.org/Style/styling-XML.html ).

Erik Dahlström le

C'est vraiment génial Erik! Cependant, je n'ai pas réussi à faire fonctionner cette astuce dans Chrome sans inclure svgweb: code.google.com/p/svgweb ... Une idée de ce que je fais mal?

Matt WD

@ MattW-D: vous devriez probablement simplement ouvrir une nouvelle question pour cela. Svgweb n'est pas nécessaire dans Chrome.

Erik Dahlström

Merci Erik, avait vraiment du mal à faire fonctionner font-face en svg via css, relier le css au svg fonctionnait du premier coup et miraculeusement dans le navigateur!

Dave

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

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

R Reveley
la source

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 oeil aux injecteurs SVG comme 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>

Waruyama
la source

Impressionnant! Merci pour l'outil soigné.

Deleplace