Exemples SVG
Primitives de base
Lignes
Rectangles
Cercles & Ellipses
Polylignes
Polygones
Paths
Lignes
Arcs
Courbe Quadratique
Courbe Cubique
Texte
Images
Dégradés
Dégradé linéaire
Dégradé radial
Motifs
Transformations
Translation
Rotation
Mise à l'échelle
Cisaillement
Avancé
Cliping
Masques
Exercices
1 - Coeur
2 - Coeurs croisés
3 - Logo Lesieur
4 - Astérie
5 - Croisillon
6 - Carrelage
7 - Vagues
8 - Mona lisa
Transformations
Translation
Rotation
Mise à l'échelle
Cisaillement
Translation (translate)
<svg width="400" height="300"> <!-- Objet avant transformation --> <rect x="50" y="50" width="150" height="100" fill="green"></rect> <!-- Objet après transformation --> <rect x="50" y="50" width="150" height="100" fill="orange" transform="translate(50,50)"></rect> </svg>
Rotation (rotate)
<svg width="400" height="300"> <!-- Objet avant transformation --> <rect x="100" y="50" width="150" height="150" fill="green"></rect> <!-- Objet après transformation autour de (0,0) --> <rect x="100" y="50" width="150" height="150" fill="brown" transform="rotate(45)"></rect> <!-- Objet après transformation autour de (175,125)--> <rect x="100" y="50" width="150" height="150" fill="orange" transform="rotate(45, 175,125)"></rect> </svg>
Mise à l'échelle (scale)
<svg width="400" height="300"> <!-- Objet avant transformation --> <rect x="40" y="40" width="100" height="100" fill="green"></rect> <!-- Objet après transformation 2xX et 1.8xY --> <rect x="40" y="40" width="100" height="100" fill="brown" transform="scale(2,1.8)"></rect> <!-- Objet après transformation --> <rect x="40" y="40" width="100" height="100" fill="orange" transform="scale(0.5)"></rect> </svg>
Cisailement (skewX et SkewY)
<svg width="400" height="300"> <!-- Objet avant transformation --> <rect x="40" y="40" width="80" height="80" fill="green"></rect> <!-- Objet après transformation suivant X --> <rect x="120" y="40" width="100" height="100" fill="brown" transform="skewX(30)" opacity="0.7"/> <!-- Objet après transformation suivant Y--> <rect x="40" y="120" width="100" height="100" fill="orange" transform="skewY(30)" opacity="0.7"/> </svg>
