communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
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 Streisand
Libérer： 2024-12-23 03:16:17
original
307 Les gens l'ont consulté

How Can I Effectively Style Embedded SVGs When Direct CSS Styling Is Limited?

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 balise, les styles CSS ne peuvent pas être appliqués directement à partir de la feuille de style du document. En effet, les styles CSS ne traversent pas les limites du document.

object svg {
    fill: #fff;
}
Copier après la connexion

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 est entièrement chargé :

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);
Copier après la connexion

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);
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

source：php.cn
Article précédent：Quand Flexbox est-il un meilleur choix que Grid pour les mises en page ? Article suivant：Les variables CSS peuvent-elles être utilisées directement dans les requêtes multimédias ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2273
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2407
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
2020
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1909
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1979
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal