Comment puis-je styliser efficacement les SVG intégrés lorsque le style CSS direct est limité ?

Style des SVG intégrés : limitations CSS et approches alternatives

Vue d'ensemble

Le style des SVG intégrés (Scalable Vector Graphics) peut présenter des défis par rapport aux SVG inclus directement dans un document. Comprendre les limites et explorer des méthodes alternatives est crucial pour un style efficace.

Style CSS direct des SVG intégrés

Lorsqu'un SVG est intégré à l'aide de l'attribut

object svg {
    fill: #fff;
}

Injecter des styles à l'aide d'un script

Étant donné que les SVG intégrés sont des documents distincts, les styles peuvent y être injectés à l'aide d'un script. La méthode suivante suppose que l'attribut

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }";
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

Alternativement, une feuille de style externe peut être liée à l'aide du lien element :

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

Style direct à partir du fichier SVG

Alternativement, les styles peuvent être directement liés ou inclus dans le fichier SVG :

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

Option supplémentaire : plugin jquery-svg

Pour plus de flexibilité, le Le plugin jquery-svg fournit des méthodes pour appliquer des styles CSS et des scripts JavaScript aux SVG intégrés.

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!