Comment styliser des SVG liés en externe avec CSS ?

Comment styliser SVG avec un CSS externe

Lorsque vous stockez des graphiques SVG en externe et y accédez via des liens, les styliser via un CSS externe peut poser un problème défi. Dans ce cas, le fichier CSS ne peut pas modifier directement le contenu du SVG.

Limitations CSS externes

Votre fichier CSS externe, "main.css", n'affectera que le contenu d'un SVG s'il est inclus en ligne dans le HTML. Cela signifie que l'extrait de code suivant :

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

ne sera pas affecté par le CSS dans "main.css."

Application de styles dans le SVG

Pour styliser un SVG stocké en externe, vous devez définir le CSS dans le fichier SVG lui-même. Vous pouvez utiliser une balise de style :

<!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 pouvez également utiliser un outil côté serveur, tel que Nokogiri dans Ruby, pour mettre à jour la balise de style en fonction du style actif.

Options de secours

Si aucune des solutions ci-dessus n'est réalisable, vous pouvez recourir à l'utilisation de SVG en ligne ou à la création de PNG séparés avec différents styles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!