Pour style SVG avec CSS, vous devez d'abord intégrer le SVG en ligne en HTML pour un contr?le fin. 1. En ligne SVG permet de sélectionner directement ses éléments internes tels que ou et d'appliquer des styles via CSS, tandis que le SVG externe ne prend en charge que les styles globaux tels que la largeur et la hauteur ou les filtres. 2. Utilisez une syntaxe CSS régulière telle que .Classe: survolez pour obtenir des effets interactifs, mais utilisez le remplissage au lieu de la couleur pour contr?ler la couleur, et utilisez une course et une largeur de course pour contr?ler le contour. 3. Utilisez des noms de classe pour organiser des styles pour éviter la duplication et prêter attention aux conflits de dénomination et à la gestion de la portée. 4. Le style SVG peut hériter de la page et peut être réinitialisé via SVG * {Fill: Aucun; TRAP: aucun; } pour éviter des résultats inattendus. Après avoir ma?trisé ces points clés, vous pouvez utiliser efficacement CSS pour contr?ler le style SVG.

Les SVG sont partout ces jours-ci - Logos, Ic?nes, Illustrations - et l'un des grands avantages est que vous pouvez les styliser avec CSS tout comme les éléments HTML. Cela les rend flexibles et faciles à intégrer dans la conception Web moderne. Mais si vous avez essayé d'appliquer des styles à SVG et que vous avez rencontré des problèmes, vous n'êtes pas seul. Il y a quelques gotchas à conna?tre.

SVG en ligne vs SVG externe

La fa?on dont vous incluez votre SVG dans une page affecte la fa?on dont vous pouvez le styliser.

• En ligne SVG : Cela signifie coller directement le code <svg></svg> réel dans votre HTML. Le grand plus ici est que vous pouvez cibler ses éléments (comme <path></path> , <circle></circle> , etc.) directement avec CSS.
• SVG externe : Si vous chargez le SVG via une balise <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175211922987577.png" class="lazy" alt="Appliquer des styles CSS aux graphiques vectoriels évolutifs (SVG)" > ou une image d'arrière-plan dans CSS, vous perdez un accès direct aux éléments internes. Dans ce cas, vous ne pouvez appliquer que des styles globaux comme la largeur, la hauteur ou les filtres de l'extérieur.

Donc, si vous voulez un contr?le à grains fins sur les couleurs, les animations ou les effets de survol à l'intérieur du SVG, allez en ligne.

Styling Elements SVG avec CSS

Une fois que votre SVG est en ligne, vous pouvez traiter bon nombre de ses éléments comme un HTML régulier en ce qui concerne le style.

Par exemple, vous pourriez avoir un logo où vous voulez que la forme principale change de couleur sur le plan de survol:

 <SVG>
  <path class = "logo-main" d = "m10 10 ..." />
</svg>

Et dans votre CSS:

 .logo-main {
  Remplir: # 333;
}

.logo-main: Hover {
  Remplir: # 09f;
}

Quelques points importants:

• Utilisez fill au lieu de color ou background-color pour les formes et les chemins.
• Les contr?les stroke contribuent et stroke-width ajuste leur épaisseur.
• Vous pouvez également animer ces propriétés avec des transitions ou des images clés.

Gardez à l'esprit que certains navigateurs plus anciens peuvent avoir un support limité pour certaines fonctionnalités CSS appliquées à SVG.

Utilisation de classes et de styles portée

Comme avec HTML, vous pouvez utiliser des cours à l'intérieur de SVG pour organiser des styles et éviter de vous répéter.

Disons que votre SVG a plusieurs parties:

 <SVG>
  <cercle class = "dot primaire" cx = "50" cy = "50" r = "10" />
  <cercle class = "dot secondary" cx = "100" cy = "50" r = "10" />
</svg>

Vous pouvez définir des styles réutilisables dans votre CSS:

 .dot {
  Transition: remplissez 0,3 s facilité;
}

.primaire {
  Remplir: rouge;
}

. Secondaire {
  Remplir: bleu;
}

Quelques conseils:

• Assurez-vous que vos noms de classe ne se heurtent pas à d'autres styles sur la page.
• Pensez à envelopper le SVG dans un récipient et à utiliser des styles de portée si nécessaire.
• Le BEM ou les conventions de dénomination similaires peuvent aider à garder les choses organisées.

Cette approche maintient votre code propre et maintenable, d'autant plus que les SVG deviennent plus complexes.

Attention à la spécificité et à l'héritage

Les éléments SVG peuvent hériter des styles de la page, ce qui est pratique mais parfois déroutant.

Par exemple, si vous définissez une couleur fill sur l'élément <svg> lui-même, les éléments enfants sans leur propre fill le ramassent automatiquement. Qui peut être utile pour le thème:

 svg {
  Remplir: CurrentColor;
}

Ensuite, vous pouvez simplement changer la propriété color ailleurs, et le SVG suit.

Mais cela signifie également que des résultats inattendus peuvent appara?tre si vous ne faites pas attention avec la spécificité du sélecteur ou les règles contradictoires. Une bonne astuce consiste à réinitialiser les styles hérités en cas de besoin:

 svg * {
  Remplir: aucun;
  TRAP: aucun;
}

De cette fa?on, vous commencez à frais et définissez exactement ce que vous voulez.

Fondamentalement, c'est tout. Le style SVG avec CSS est puissant une fois que vous savez comment cela fonctionne, mais il nécessite une attention sur la fa?on dont SVG attribue la carte des propriétés CSS et comment le fichier est inclus dans la page.

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!