Traduction
Tutoriel CSS3 - sommaire
Tutoriel CSS3 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
CSS permet de styliser non seulement des éléments HTML mais aussi des objets SVG.
Je rappelle que le langage SVG permet de réaliser des dessins statiques ou animés pour le web.
Dessiner des triangles, des ellipses, des polygones, des arcs, des courbes avec SVG devient un jeu d'enfant.
Par ailleurs ces images sont vectorielles : peuvent être agrandies sans perte de qualité.
Mon tuto sur le langage SVG
Toutes les propriétés CSS applicables à un élément HTML sont aussi applicables à un objet SVG mais à quelques exceptions près.
Ci-dessous un canevas SVG dans cette page web :
Le canevas SVG contient deux éléments : un rectangle et un cercle.
J'ai appliqué les propriétés background & border à l'élément SVG et à l'objet RECT. Or ce dernier est rempli de noir ...
Les propriétés background & border ne peuvent pas s'appliquer à des objets SVG.
Attention l'élément SVG est un élément HTML donc on peut lui appliquer les propriétés citées.
Il faut utiliser à la place les propriétés spécifiques aux éléments SVG : fill, fill-opacity, stroke, stroke-width, etc.
Notez que les coins du carré sont arrondis.
Les filtres CSS peuvent s'appliquer aussi non seulement à des éléments HTML mais aussi à des objets SVG.
Extrait de la feuille de style de cette page web :
.flou1 {filter : blur(6px);}
.ombrage1{filter : drop-shadow(10px 10px 10px gray) }
.composite1 {filter : blur(4px) drop-shadow(10px 10px 10px gray); }
Un floutage, un ombrage, un filtre composite : floutage et ombrage.
Le premier rectangle est flouté.
Le deuxième rectangles est ombré.
Le troisième rectangle est ombré et flouté.
La propriété z-index qui est très pratique puisqu'elle permet de gérer l'ordre d'empilement des éléments, ne peut pas s'appliquer
à des éléments SVG.
La norme SVG version 2 prévoit la généralisation de cette propriété à tous les éléments d'une page web : balises HTML mais
objets SVG.
Mais on ne peut que constater que cette innovation n'a pour l'instant (juillet 2025) été implémentée par aucun des navigateurs ...
Un carré violet très opaque se transforme en rond transparent puis le cycle recommence en sens inverse et se répète à l'infini.
Notez la balise animate dans le conteneur rect.
La forme est identifiée "carre".
Un modèle d'animation appliqué à l'objet SVG identifié "carré".
@keyframes transparaitre
{
0%{fill-opacity : 1; }
50% {fill-opacity : 0.5; }
100% {fill-opacity : 1; }
}
#carre {animation : transparaitre 10s 0s infinite linear alternate;}
Je ne peux pas animer totalement en CSS. En effet le paramètre rx est obligatoirement un attribut donc
je ne peux le manipuler dans le cadre d'un "keyframes".
J'anime alors l'opacité via CSS et l'arrondi du carré via le SMIL (composante animation du SVG)
La norme SVG version 2 prévoit que le paramètre rx pourra être passé en propriété (comme tous les paramètres géométriques : x,y,width, height,cx,cy,r,rx,ry,etc.) Mais pour l'instant (juillet 2025) seul Chrome et Edge ont implémenté cette avancée.
Le cercle change de rayon et d'opacité selon un cycle répétitif.
Sous Firefox : seul le canevas rempli de jaune apparait.
Conformément à la norme SVG2, tous les paramètres géométriques peuvent être spécifiés en propriétés.
Seuls Chrome et Edge ont implémenté cette spécification de la version 2.
Le code SVG :
Notez que la forme est identifiée "rond".
Les paramètres géométriques (cx,cy, r) sont passés en propriétés.
Extrait de la feuille de style de cette page web :
@keyframes animer
{
0% {fill-opacity:0.1; r : 10;}
50% {fill-opacity :1 ; r: 200 ;}
100% {fill-opacity:0.1; r : 10; }
}
#rond {animation : animer 20s 0s infinite linear;}
Dans le "keyframes" je peux manipuler aussi le paramètre r.