Comment styliser un SVG avec un CSS externe ?

Question

Comment styliser un SVG avec un CSS externe ?

Demandé el 25 de Août, 2013: Quand la question a-t-elle été
157833 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai plusieurs graphiques SVG dont j'aimerais modifier les couleurs via mes feuilles de style externes - et non directement dans chaque fichier SVG. Je ne mets pas les graphiques en ligne, mais je les stocke dans mon dossier d'images et je pointe vers eux.

Je les ai implémentés de cette manière pour permettre aux infobulles de fonctionner, et j'ai également enveloppé chacun d'entre eux dans une balise <a> pour autoriser un lien.

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

Et voici le code du graphique SVG :

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>

J'ai mis ce qui suit dans mon fichier CSS externe (main.css) :

.socIcon g {fill:red;}

Pourtant, cela n'a aucun effet sur le graphique. J'ai également essayé .socIcon g path {} y .socIcon path {} .

Quelque chose ne va pas, peut-être que ma mise en œuvre ne permet pas de modifier les CSS externes, ou que j'ai manqué une étape ? J'apprécierais vraiment votre aide ! J'ai juste besoin de la possibilité de modifier les couleurs du graphique SVG via ma feuille de style externe, mais je ne peux pas perdre la possibilité de créer des infobulles et des liens (je pourrais peut-être vivre sans infobulles cependant).

Demandé el 25 de Août, 2013 par Joey

Answer 1

5 Réponses

Answer 2

113voto

RGB Points 1609

Votre fichier main.css n'aura un effet sur le contenu du SVG que si le fichier SVG est inclus en ligne dans le HTML :

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

<html>
  <body>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
    <g>
      <path d="M28.44......."/>
    </g>
  </svg>
</html>

Si vous souhaitez conserver vos SVG dans des fichiers, le CSS doit être défini à l'intérieur du fichier SVG.

Vous pouvez le faire avec une balise de style :

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill:red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......./>
  </g>
</svg>

Vous pourriez utiliser un outil côté serveur pour mettre à jour la balise de style en fonction du style actif. En ruby, vous pourriez réaliser cela avec Nokogiri. SVG est juste du XML. Il y a donc probablement de nombreuses bibliothèques XML disponibles qui peuvent réaliser cela.

Si vous n'êtes pas en mesure de le faire, vous devrez simplement les utiliser comme s'il s'agissait de PNG, en créant un ensemble pour chaque style et en enregistrant leurs styles en ligne.

Répondu el 21 de Décembre, 2013 par RGB (1609 Points )

Answer 3

58voto

Adam Korman Points 581

Vous pouvez faire ce que vous voulez, avec un avertissement (important) : les chemins dans votre symbole ne peuvent pas être stylisés indépendamment via un CSS externe -- vous pouvez seulement définir les propriétés pour le symbole entier avec cette méthode. Ainsi, si vous avez deux chemins dans votre symbole et que vous voulez qu'ils aient des couleurs de remplissage différentes, cela ne fonctionnera pas, mais si vous voulez que tous vos chemins soient identiques, cela devrait fonctionner.

Dans votre fichier html, vous voulez quelque chose comme ceci :

<style>
  .fill-red { fill: red; }
  .fill-blue { fill: blue; }
</style>

<a href="http://stackoverflow.com//www.example.com/">
  <svg class="fill-red">
    <use xlink:href="images/icons.svg#example"></use>
  </svg>
</a>

Et dans le fichier SVG externe, vous voulez quelque chose comme ceci :

<svg xmlns="http://www.w3.org/2000/svg">
   <symbol id="example" viewBox="0 0 256 256">
    <path d="M120...." />
  </symbol>
</svg>

Intervertissez la classe sur le svg (dans votre html) de fill-red a fill-blue et ta-da... tu as du bleu au lieu du rouge.

Vous pouvez contourner partiellement la limitation de la possibilité de cibler les chemins séparément avec un CSS externe en mélangeant le CSS externe avec un CSS en ligne sur des chemins spécifiques, puisque le CSS en ligne aura la priorité. Cette approche fonctionnerait si vous faites quelque chose comme une icône blanche sur un fond coloré, où vous voulez changer la couleur du fond via le CSS externe mais l'icône elle-même est toujours blanche (ou vice-versa). Ainsi, avec le même HTML que précédemment et quelque chose comme ce code svg, vous obtiendrez un arrière-plan rouge et un chemin de premier plan blanc :

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="example" viewBox="0 0 256 256">
    <path class="background" d="M120..." />
    <path class="icon" style="fill: white;" d="M20..." />
  </symbol>
</svg>

Répondu el 13 de Octobre, 2014 par Adam Korman (581 Points )

Answer 4

29voto

Jacek Mamot Points 291

Vous pouvez inclure dans vos fichiers SVG un lien vers un fichier css externe en utilisant :

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>

Vous devez le mettre après la balise d'ouverture :

<svg>
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
  <g>
    <path d=.../>
  </g>
</svg>

Ce n'est pas une solution parfaite, car vous devez modifier les fichiers svg, mais vous les modifiez une fois et toutes les modifications de style peuvent être effectuées dans un seul fichier css pour tous les fichiers svg.

Répondu el 28 de Décembre, 2019 par Jacek Mamot (291 Points )

Answer 5

11voto

Pete Points 2668

Il est possible de styliser un SVG en créant dynamiquement un élément de style en JavaScript et en l'ajoutant à l'élément SVG. C'est difficile, mais ça marche.

<object id="dynamic-svg" type="image/svg+xml" data="your-svg.svg">
    Your browser does not support SVG
</object>
<script>
    var svgHolder = document.querySelector('object#dynamic-svg');
    svgHolder.onload = function () {
        var svgDocument = svgHolder.contentDocument;
        var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");

        // Now (ab)use the @import directive to load make the browser load our css
        style.textContent = '@import url("/css/your-dynamic-css.css");';

        var svgElem = svgDocument.querySelector('svg');
        svgElem.insertBefore(style, svgElem.firstChild);
    };
</script>

Vous pouvez générer le JavaScript de manière dynamique en PHP si vous le souhaitez. Le fait que cela soit possible en JavaScript ouvre une myriade de possibilités.

Répondu el 24 de Mai, 2017 par Pete (2668 Points )

Answer 6

7voto

Simon White Points 628

Une approche possible consiste à utiliser des filtres CSS pour modifier l'apparence des graphiques SVG dans le navigateur.

Par exemple, si vous avez un graphique SVG qui utilise une couleur de remplissage rouge dans le code SVG, vous pouvez la rendre violette avec un paramètre de rotation de la teinte de 180 degrés :

#theIdOfTheImgTagWithTheSVGInIt {
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
    -moz-filter: hue-rotate(180deg);
    -o-filter: hue-rotate(180deg);
    -ms-filter: hue-rotate(180deg);
}

Expérimentez d'autres paramètres de rotation de la teinte pour trouver les couleurs que vous souhaitez.

Pour être clair, le CSS ci-dessus va dans le CSS qui est appliqué à votre document HTML. Vous donnez un style à la balise img dans le code HTML, et non au code du SVG.

Notez que cela ne fonctionne pas avec les graphiques dont le remplissage est noir, blanc ou gris. Il faut qu'il y ait une couleur réelle pour faire tourner la teinte de cette couleur.

Répondu el 13 de Août, 2015 par Simon White (628 Points )

Comment styliser un SVG avec un CSS externe ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment styliser un SVG avec un CSS externe ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: