Comment puis-je styliser des SVG intégrés à l'aide de la balise `` ?

Application de styles aux SVG intégrés

Contrairement aux SVG directement inclus via l'option

Explication technique

Les feuilles de style ne s'appliquent que dans les limites du document dans lequel elles sont définies. Les SVG intégrés sont considérés comme distincts documents, et par conséquent, les styles définis en externe ne peuvent pas les affecter.

Solution : Style basé sur un script Insertion

Depuis que l' La balise donne accès au document SVG intégré, vous pouvez insérer par programme des éléments de style dans le document intégré. Voici un exemple :

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

Cela suppose que l'objet