Maison >interface Web >tutoriel CSS >Comment puis-je styliser efficacement les SVG intégrés lorsque le style CSS direct est limité ?
Comment puis-je styliser efficacement les SVG intégrés lorsque le style CSS direct est limité ?
- Barbara Streisandoriginal
- 2024-12-23 03:16:17308parcourir
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!