Propriétés SVG dans le guide CSS

Ce guide explore l'intersection de CSS et de graphiques vectoriels évolutifs (SVG), en se concentrant sur le style des éléments SVG à l'aide de propriétés CSS. Alors que de nombreux attributs SVG existent, seuls certains - des attributs de présentation, peuvent être directement stylisés avec CSS. Certaines propriétés CSS sont partagées avec SVG (comme font-size et opacity ), tandis que d'autres sont spécifiques au SVG.

Par exemple, pour colorer un élément rouge, la propriété fill fonctionne dans CSS car fill est un attribut de présentation:

 cercle {
  Remplir: rouge;
}

Ce guide détaille de manière approfondie les éléments SVG disponibles et leurs propriétés CSS correspondantes, couvrant diverses techniques de style, y compris les styles généraux et les animations.

Éléments SVG et propriétés CSS: un aperçu catégorisé

Ce qui suit décrit les attributs de présentation utilisables comme propriétés CSS, classées pour plus de clarté. Les éléments obsolètes sont exclus.

Propriétés partagées CSS et SVG

Propriétés de la police

Propriétés du texte

Propriétés de masquage

Propriétés d'interactivité

Propriétés de couleur

Propriétés de la visibilité

Propriétés CSS spécifiques au SVG

Propriétés du texte

Clip des propriétés

Propriétés de masquage

Effets de filtre

Propriétés de gradient

Propriétés d'interactivité

Propriétés de couleur

Propriétés de peinture

Style SVG 2 et CSS

Alors que les attributs de présentation comblent l'écart entre CSS et le style SVG, SVG 2 (actuellement dans la recommandation des candidats) améliore considérablement cette interaction, permettant le contrôle des coordonnées et des dimensions des éléments à l'aide de CSS.

La spécification SVG 2 clarifie:

"Certaines propriétés de style peuvent être spécifiées non seulement dans les feuilles de style et les attributs de« style », mais aussi dans les attributs de présentation. Ce sont des attributs dont le nom correspond (ou est similaire à) une propriété CSS donnée et dont la valeur est analysée comme une valeur de cette propriété.»

Cela signifie que le CSS, y compris les pseudo-classes comme :hover et :active , peut styliser les propriétés SVG via des attributs de présentation ou des feuilles de style. SVG 2 introduit également des attributs de présentation supplémentaires pour le style. Reportez-vous à la spécification SVG 2 pour une liste complète.

Support de propriété spécifique à l'élément

Il est crucial de se rappeler que le support de la propriété CSS varie selon les éléments SVG. Certaines propriétés sont spécifiques à l'élément. Par exemple,<circle></circle> et<ellipse></ellipse> Soutenez cx , cy , rx et ry , mais d'autres éléments pourraient ne pas le faire.

Propriétés de la géométrie

SVG 2 définit des propriétés telles que rx et ry comme propriétés de géométrie, stylables avec CSS aux côtés d'attributs de présentation comme fill ou stroke .

Positionnement des éléments SVG avec CSS (SVG 2)

SVG 2 permet le positionnement basé sur CSS. Considérez un rectangle:

<svg height="170" width="170"><rect height="150" width="150" x="10" y="10"></rect></svg>

Avec SVG 2, les attributs x et y peuvent être contrôlés via CSS:

 / * Fonctionne avec SVG 2 * /
rect {
  X: 10;
  Y: 10;
  / * ... autres styles ... * /
}

Simplifier le balisage SVG à:

<svg height="170" width="170"><rect height="150" width="150"></rect></svg>

De même, width et height peuvent être définies à l'aide de CSS, minimisant davantage le code SVG.

Actuellement, les navigateurs Blink (Chrome, Opera) et WebKit (Safari) offrent une meilleure prise en charge de ces fonctionnalités SVG 2. Pour une compatibilité plus large, des techniques alternatives sont nécessaires.

Morphing de forme SVG avec CSS

Le CSS peut être utilisé pour créer des effets de morphing de forme. Les chemins SVG impliqués doivent avoir des commandes identiques et le même nombre de points pour le morphing réussi.

Exemple: Morphing d'un triangle en carré.

<svg height="220" width="300"><path d="M150 10 L40 200 L260 200Z"></path></svg>

CSS pour remplacer le chemin:

 chemin {
  D: Path ("M150, 10 L40, 200 L260, 200Z"); / * Forme initiale * /
  Remplir: # 4C6EDB;
}

Chemin: actif {
  D: Path ("M10,10 L160,10 L160,160 L10.160 Z"); / * Forme transformée * /
  Remplir: # 4C6EDB;
  transition: toutes les 0,35 s facilité;
}

Le balisage SVG simplifie:

<svg height="220" width="300"><path></path></svg>

Animer les propriétés SVG avec CSS

Les animations et transitions CSS anident les propriétés SVG. Cet exemple démontre une animation d'onde avec cinq cercles:

<svg height="250" width="350"><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle></svg>

CSS avec des variables et :nth-child() pour le style et l'animation:

 / * ... CSS pour les couleurs et les styles de cercle initiaux ... * /

.forme {
  / * ... styles initiaux ... * /
  Animation: MoveCircle 1250ms Facity-in-Out Infinite;
}

/ * ... Animation-retard pour chaque cercle ... * /

@KeyFrames MoveCircle {
  50% {
    Cy: 150;
    R: 13;
  }
}

Animations à l'intérieur<pattern></pattern> Les éléments sont également possibles.

Conclusion

Alors que SVG 2 offre des capacités de style CSS puissantes, le support généralisé du navigateur est toujours en développement. Pour une utilisation en production, envisagez soigneusement la compatibilité. À mesure que SVG 2 mûrit, le style CSS des propriétés de géométrie SVG deviendra de plus en plus robuste et fiable.

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!