Style CSS des SVG intégrés
Application de styles CSS à un SVG directement inclus dans un document à l'aide de l'option
Réponse courte : Non
Les styles CSS ne traversent pas les limites du document. Un
Approches alternatives
Heureusement, il existe des méthodes alternatives pour styliser les SVG intégrés :
1. Insertion de feuille de style par programmation :
À l'aide de JavaScript, la feuille de style peut être insérée directement dans le document SVG dans le fichier
var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // Adjust as needed
svgDoc.getElementById("where-to-insert").appendChild(styleElement);2. Référencement de feuille de style externe :
Un
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);3. Importation CSS (@import Rule) :
La première méthode peut être utilisée pour insérer un élément de style et ensuite ajouter une règle @import :
styleElement.textContent = "@import url(my-style.css)";
4. Liaison directe de feuille de style SVG :
Le fichier SVG lui-même peut référencer directement une feuille de style :
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet href="my-style.css" type="text/css"?> <svg xmlns="http://www.w3.org/2000/svg"> ... (SVG content) ... </svg>
5. Plugin jquery-svg :
Le plugin jquery-svg offre une approche alternative pour appliquer les styles JavaScript et CSS 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!
Touche de raccourci d'arrêt rapide
Quelles sont les utilisations de MySQL
Le processus spécifique de connexion au wifi dans le système win7
Comment configurer l'espace virtuel jsp
Solution au problème selon lequel le logiciel de téléchargement Win11 ne peut pas être installé
Pourquoi l'imprimante n'imprime-t-elle pas ?
Le sens de la construction de sites web européens et américains
Comment ouvrir le disque virtuel
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
