Comment styliser un SVG avec un CSS externe ?

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).

Answer 1

Il devrait être possible de le faire en mettant d'abord en ligne les images svg externes. Le code ci-dessous provient de remplacer toutes les images SVG par des SVG en ligne par Jess Frazelle.

$('img.svg').each(function(){
  var $img = $(this);
  var imgID = $img.attr('id');
  var imgClass = $img.attr('class');
  var imgURL = $img.attr('src');
  $.get(imgURL, function(data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');
    // Add replaced image's ID to the new SVG
    if (typeof imgID !== 'undefined') {
      $svg = $svg.attr('id', imgID);
    }
    // Add replaced image's classes to the new SVG
    if (typeof imgClass !== 'undefined') {
      $svg = $svg.attr('class', imgClass+' replaced-svg');
    }
    // Remove any invalid XML tags as per http:validator.w3.org
    $svg = $svg.removeAttr('xmlns:a');
    // Replace image with new SVG
    $img.replaceWith($svg);
  });
});

Answer 2

Une solution très rapide pour avoir un style dynamique avec une feuille de style css externe, au cas où vous utiliseriez l'option <object> pour intégrer votre svg.

Cet exemple ajoutera une classe à la Racine <svg> en cas de clic sur un élément parent.

file.svg :

<?xml-stylesheet type="text/css" href="../svg.css"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="">
  <g>
   <path/>
  </g>
 </svg>

html :

<a class="parent">
  <object data="file.svg"></object>
</a>

Jquery :

$(function() {
  $(document).on('click', '.parent', function(){
    $(this).find('object').contents().find('svg').attr("class","selected");
  }
});

sur l'élément parent du clic :

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="" class="selected">

vous pouvez ensuite gérer vos css

svg.css :

path {
 fill:none;
 stroke:#000;
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

.selected path {
 fill:none;
 stroke:rgb(64, 136, 209);
 stroke-miterlimit:1.41;
 stroke-width:0.7px;
}

Answer 3

1. Pour les styles externes

   <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">

   <style> @import url(main.css); </style>

   <g> <path d="M28.44......./> </g> </svg>

2. Pour les styles internes

   <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">

   <style> .socIcon g {fill:red;} </style>

   <g> <path d="M28.44......./> </g> </svg>

Remarque : les styles externes ne fonctionneront pas si vous incluez un SVG dans le fichier. <img> étiquette. Il fonctionnera parfaitement à l'intérieur <div> étiquette

Answer 4

Lorsqu'il est utilisé dans un <image> Le tag SVG doit être contenu dans un seul fichier pour des raisons de confidentialité. Ce site bugzilla bug a plus de détails sur la raison exacte de cette situation. Malheureusement, vous ne pouvez pas utiliser une balise différente, telle qu'une balise <iframe> car cela ne fonctionnera pas en tant que lien. Vous devrez donc intégrer le CSS dans un fichier de type <style> dans le fichier lui-même.

Une autre façon de procéder serait de placer les données SVG dans le fichier html principal, par exemple.

<a href='http://youtube.com/...' target='_blank'>
  <svg 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>
</a>

Vous pouvez créer un style avec un fichier CSS externe à l'aide de la fonction HTML <link> étiquette.

Answer 5

Ce qui fonctionne pour moi : balise de style avec règle @import

<defs>
    <style type="text/css">
        @import url("svg-common.css");
    </style>
</defs>