Dessin SVG
Le container
svg width="largeur" height="hauteur"
description du dessin
/svg
Les figures
rect x="origine" y="origine" width= largeur" height="hauteur"/
svg class="quoi" width="120" height="80"
rect x="0" y="0" width="33%" height="100%" fill="navy"/
rect x="66%" y="0" width="33%" height="100%" fill="red"/
/svg
circle cx="origine" cy="origine" r="rayon"/
Exemple : circle cx="50%" cy="50%" r="30%" fill="navy"/
ellipse cx="origine" cy="origine" rx="rayon" ry="rayon" /
Exemple : ellipse cx="50%" cy="50%" rx="45%" ry="30%" fill="green"/
line x1="départ" y1="départ" x2="arrivée" y2="arrivée"/
Exemple : line x1="10%" y1="30%" x2="90%" y2="60%" stroke="red" stroke-width="3px"/
polygon points="x,y x,y x,y" /
Exemple : polygon points="25,3 45,45 3,45" fill="yellow" stroke="red" stroke-width="3px"/
Le texte
text x="origine" y="origine" text-anchor="alignement"
TEXTE/text
Exemple : text x="0" y="0" text-anchor="middle" font-size="60" fill="navy" font-size="24"
Coucou/text
text
TEXTEtspan traitement
TEXTE/tspan
TEXTE/text
Exemple : tspan rotate="-20" dy="-5"
les/tspan
Clip
Il est possible de montrer une image à travers un masque via clip-path.
Malheureusement cette possibilité n'est pas validée par le W3C. Pour certains navigateurs, clip-path peut déterminer le masque, pour Firefox, il faut passer par un masque SVG.
style
.oleron {clip-path: url(#patate);}
/style
/head
body
img class="oleron" src="oleron.jpg"/
svg
defs
clipPath id="patate"
<path d="M 322.77269,172.61144 ...
... 146.96177,131.207976 z"/>
/path
/clipPath
/defs
/svg
Animation SVG
p id="leon"
object data="images/aml.svg" type="image/svg+xml"
/object
/p
#leon:hover {transform: scale(1.5);transform-origin: 0%;}
#logo{ margin-top :150px ;transform: rotate(10deg) scale(3);transform-origin: 0%;}
@keyframes Vas-y {
0% {transform: scale(1); transform-origin: 0%;}
50% { transform: rotate(90deg) scale(4); transform-origin: 0%;}
100% { transform: scale(1) ; transform-origin: 0%;}
}