Récupération du cours SVG
This commit is contained in:
26
formes/exercice/index.md
Executable file
26
formes/exercice/index.md
Executable file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: SVG - Smartphone
|
||||
---
|
||||
|
||||
> ***Prérequis :*** le format SVG, les [formes](../) et les [propriétés](../../propriétés)
|
||||
:{.info}
|
||||
|
||||
Vous devez dessiner un téléphone au format SVG.
|
||||
Utilisez Visual Studio Code avec l'extension SVG de Jock pour prévisualiser le résultat.
|
||||
|
||||
1. Créer un rectangle de largeur 490 et de hauteur 970. Le rectangle a des coins arrondis de 70. Le contour noir fait 15 d'épaisseur. Remplissez le rectangle d'un gris très clair (#fcfcfc).
|
||||
|
||||
2. Créer un deuxième rectangle de le largeur 410 et de hauteur 745. Le contour noir fait 15 d'épaisseur. Remplissez le rectangle de blanc. Le rectangle est centré horizontalement dans le premier et décalé de 110 vers le bas.
|
||||
|
||||
3. Dessiner une ligne de longueur 60. Le contour noir fait 15 d'épaisseur. La ligne est terminée par des arrondis. La ligne est centré horizontalement dans le premier et centré verticalement entre les 2 rectangles.
|
||||
|
||||
4. Dessinez un cercle de rayon 10 alignée sur la ligne et placé à 170 du bord gauche.
|
||||
|
||||
5. Dessinez un cercle rempli de couleur noire de rayon 35 situé à 905 du haut.
|
||||
|
||||
6. Dessinez un cercle rempli de couleur blanche de rayon blanc, centré sur le premier cercle.
|
||||
|
||||
|
||||
|
||||
Télécharger la [solution](telephone.svg)
|
||||
11
formes/exercice/notebook.svg
Executable file
11
formes/exercice/notebook.svg
Executable file
@@ -0,0 +1,11 @@
|
||||
<svg>
|
||||
<path fill="currentColor" d="M89.5,3.4C89.3,3.3,89.1,3.1,89,3c-0.2-0.2-0.5-0.4-0.7-0.5c-0.4-0.3-0.9-0.5-1.3-0.6
|
||||
c-0.1-0.1-0.3-0.1-0.4-0.1c-0.6-0.2-1.2-0.2-1.8-0.2H66.3H52.1h-7.7H30.1H11.7C8,1.5,5,4.5,5,8.2v18.4l0,0v32.2h86.4V26.6l0,0V8.2
|
||||
c0-0.7-0.1-1.4-0.3-2C90.8,5.1,90.2,4.2,89.5,3.4z"></path><path fill="none" d="M59.3,64.6h-22c-2,0-2.6,0.6-2.7,1.4h0v0.1v0.1h0c0.1,0.8,0.7,1.4,2.7,1.4h22c2,0,2.4-0.6,2.6-1.4h0v-0.1V66h0
|
||||
C61.8,65.2,61.3,64.6,59.3,64.6z"></path><path d="M96.4,65.9C96.2,64.2,95.2,63,91,63H5.7c-4.2,0-5.5,1.3-5.7,2.9h0v0.2v0.2h0c0.2,1.6,1.6,2.9,5.7,2.9H91
|
||||
c4.2,0,5.2-1.3,5.4-2.9h0v-0.2L96.4,65.9L96.4,65.9z M61.9,66.1L61.9,66.1L61.9,66.1c-0.1,0.9-0.6,1.5-2.6,1.5h-22
|
||||
c-2,0-2.6-0.6-2.7-1.4h0v-0.1V66h0c0.1-0.8,0.7-1.4,2.7-1.4h22C61.3,64.6,61.8,65.2,61.9,66.1L61.9,66.1L61.9,66.1z"></path><path d="M92.9,8.2c0-4.5-3.7-8.2-8.2-8.2h-73C7.2,0,3.6,3.7,3.6,8.2v52.2h89.3V8.2z M91.4,58.9H5V8.2c0-3.7,3-6.7,6.7-6.7h73
|
||||
c0.6,0,1.2,0.1,1.8,0.2c0.2,0,0.3,0.1,0.4,0.1c0.5,0.2,0.9,0.4,1.3,0.6C88.5,2.7,88.8,2.8,89,3c0.2,0.1,0.3,0.3,0.5,0.4
|
||||
c0.8,0.8,1.3,1.7,1.7,2.7c0.2,0.6,0.3,1.3,0.3,2V58.9z">
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
formes/exercice/telephone.png
Executable file
BIN
formes/exercice/telephone.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
formes/exercice/telephone.png~
Executable file
BIN
formes/exercice/telephone.png~
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
14
formes/exercice/telephone.svg
Executable file
14
formes/exercice/telephone.svg
Executable file
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200">
|
||||
<g transform="translate(255 15)">
|
||||
<rect x="0" y="0" width="490" height="970" rx="70" ry="70" fill="#fcfcfc"
|
||||
stroke="black" stroke-width="15"/>
|
||||
<rect x="40" y="110" width="410" height="745" fill="#fff"
|
||||
stroke="black" stroke-width="15" />
|
||||
<line x1="215" y1="55" x2="275" y2="55"
|
||||
stroke="black" stroke-width="15" stroke-linecap="round"/>
|
||||
<circle cx="170" cy="55" r="10" fill="#000" />
|
||||
<circle cx="240" cy="915" r="35" fill="#000" />
|
||||
<circle cx="240" cy="915" r="20" fill="#fcfcfc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 595 B |
44
formes/exercice/tv/index.md
Executable file
44
formes/exercice/tv/index.md
Executable file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: SVG - Télévision
|
||||
---
|
||||
|
||||
> ***Pérequis :*** le format SVG, les [formes](../), les [propriétés](../../propriétés), le [masquage](../../découpe)
|
||||
{.info}
|
||||
|
||||
Vous devez dessiner un téléphone au format SVG.
|
||||
Utilisez Visual Studio Code avec l'extension SVG de Jock pour prévisualiser le résualt.
|
||||
|
||||
Une partie de l'illustration est déja fournie
|
||||
|
||||
```svg
|
||||
<g id="pied">
|
||||
<path d="M99.401,76.806l-18.189-3.69 -21.333-4.483c-0.099-0.368-0.166-0.778-0.197-1.22c-0.854,0.003-1.71,0.006-2.57,0.006
|
||||
s-1.716-0.003-2.573-0.006c-0.028,0.442-0.099,0.852-0.197,1.221l-21.236,4.462 -18.284,3.709c-0.93,0.179-1.533,1.039-1.343,1.92
|
||||
c0.188,0.883,1.096,1.452,2.028,1.272l40.321-7.015c0.432-0.013,0.88-0.02,1.342-0.02c0.414,0,0.814,0.007,1.203,0.017
|
||||
l40.343,7.019c0.93,0.179,1.838-0.391,2.027-1.272C100.934,77.845,100.333,76.986,99.401,76.806z"/>
|
||||
<path d="M18.519,74.021c0,0,31.385-5.191,31.475-5.683c0.208-0.084,0.075-0.533-0.118-0.519l-31.787,4.184
|
||||
c-0.588,0.113-0.969,0.656-0.85,1.214C17.357,73.773,17.932,74.133,18.519,74.021z"/>
|
||||
<path d="M96.986,73.216c0.12-0.558-0.26-1.101-0.85-1.214l-31.787-4.184c-0.193-0.014-0.326,0.435-0.118,0.519
|
||||
c0.088,0.492,31.475,5.683,31.475,5.683C96.292,74.133,96.867,73.773,96.986,73.216z"/>
|
||||
</g>
|
||||
```
|
||||
|
||||
L'illustration commence à l'origine en **0,0**.\
|
||||
La largeur totale est de **115px** et la hauteur d'un côté de **62px**.\
|
||||
La partie centrale est incurvée avec un vecteur de contrôle vertical qui descend de **3px** à bartir du bord, elle relie le point central qui est plus bas de **5px** que le bord, le vecteur issu du point central est horizontal est fait **20px**.\
|
||||
Une courbe relie l'autre bord de l'écran, elle est symétrique par rapport à la première.
|
||||
|
||||
La marge entre le bord extérieur et la La zone vide intérieure fait **4px**.
|
||||
|
||||
Vous devez dessiner l'écran avec un seul élément path qui sera composé de 2 parties. Pour passer d'une partie à l'autre il faut fermer le premier chemin avec la commande z et se déplacer au début du deuxième avec la commande M.
|
||||
Pour que le centre soit vide il faut que les 2 chemins tournent en sens inverse l'un de l'autre.
|
||||
|
||||
Ajouter la photo du panda, fixer la hauteur de la photoraphie à **90px**, la largeur est laissée en automatique par rapport à la hauteur.
|
||||
|
||||
Faire un découpage de l'image pour la faire rentrer dans la tv
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
formes/exercice/tv/panda.webp
Executable file
BIN
formes/exercice/tv/panda.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
89
formes/exercice/tv/reponse.md
Executable file
89
formes/exercice/tv/reponse.md
Executable file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: Réponse
|
||||
---
|
||||
|
||||
|
||||
Le milieu de la forme se trouve à 115 / 2 = 57.5px
|
||||
|
||||
Origine en 0, 0 -> M0,0\
|
||||
Lettre en minuscule toutes les coordonnées sont relatives au point précédent\
|
||||
Largeur totale -> h115 (ligne horizontale)\
|
||||
Hauteur d"un coté -> v62 (ligne verticale)
|
||||
|
||||
partie centrale incurvée -> c\
|
||||
vecteur de contrôle vertical qui descend de **3px** ->0 3\
|
||||
point central qui est plus bas de **5px** -> -57.5 5\
|
||||
le vecteur issu du point central est horizontal est fait **20px** -> (-57.5 + 20) 5 -> -37.5 5\
|
||||
|
||||
courbe symétrique -> s
|
||||
il n'est pas nécessaire de définir le vecteur issu du point central\
|
||||
vecteur de contrôle vertical qui descend de **3px** pour l'extremtité gauche -> s-57.5 -2. On descend de 3px du point mais comme nous sommes déja descendu de 5 il faut remonter de 2. La lettre minuscule indique un déplacement relatif par rapport au point précédent.\
|
||||
Extremité gauche -> -57.5 -5 On remonte de 5px\
|
||||
Retour à l'origine et fermer la forme-> z
|
||||
|
||||
Déplacement à l'origine de la deuxième forme -> M4,4 -> 4px de marge\
|
||||
Cette fois si il faut se déplacer dans le sens trigonométrique\
|
||||
Descendre de 54px (62 - 4 - 4) -> v54\
|
||||
Aller à l'autre extremité -> 155 - 4 - 4 -> h107\
|
||||
Remonter -> V4 ou v-54
|
||||
Revenir à l'origine et fermer la forme -> z
|
||||
|
||||
|
||||
```svg
|
||||
<path d="M0,0
|
||||
h115
|
||||
v62
|
||||
c0 3 -37.5 5 -57.5 5
|
||||
s-57.5 -2 -57.5 -5
|
||||
z
|
||||
M4,4 v54 h107 V4 z" />
|
||||
```
|
||||
|
||||
Le cercle au centre de rayon 2.5
|
||||
|
||||
```svg
|
||||
<circle cx="57.5" cy="62" r="2.5" fill="white" />
|
||||
```
|
||||
|
||||
La balise image
|
||||
|
||||
```svg
|
||||
<image href="panda.webp" height="90" clip-path="url(#ecran)" />
|
||||
```
|
||||
|
||||
```svg
|
||||
<defs>
|
||||
<clipPath id="ecran">
|
||||
<rect x="4" y="4" width="107" height="54.5" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
```
|
||||
|
||||
Le <a href="../tv.svg" download>fichier</a>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 82">
|
||||
<defs>
|
||||
<clipPath id="ecran">
|
||||
<rect x="4" y="4" width="107" height="54.5" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="pied">
|
||||
<path d="M99.401,76.806l-18.189-3.69 -21.333-4.483c-0.099-0.368-0.166-0.778-0.197-1.22c-0.854,0.003-1.71,0.006-2.57,0.006
|
||||
s-1.716-0.003-2.573-0.006c-0.028,0.442-0.099,0.852-0.197,1.221l-21.236,4.462 -18.284,3.709c-0.93,0.179-1.533,1.039-1.343,1.92
|
||||
c0.188,0.883,1.096,1.452,2.028,1.272l40.321-7.015c0.432-0.013,0.88-0.02,1.342-0.02c0.414,0,0.814,0.007,1.203,0.017
|
||||
l40.343,7.019c0.93,0.179,1.838-0.391,2.027-1.272C100.934,77.845,100.333,76.986,99.401,76.806z"/>
|
||||
<path d="M18.519,74.021c0,0,31.385-5.191,31.475-5.683c0.208-0.084,0.075-0.533-0.118-0.519l-31.787,4.184
|
||||
c-0.588,0.113-0.969,0.656-0.85,1.214C17.357,73.773,17.932,74.133,18.519,74.021z"/>
|
||||
<path d="M96.986,73.216c0.12-0.558-0.26-1.101-0.85-1.214l-31.787-4.184c-0.193-0.014-0.326,0.435-0.118,0.519
|
||||
c0.088,0.492,31.475,5.683,31.475,5.683C96.292,74.133,96.867,73.773,96.986,73.216z"/>
|
||||
</g>
|
||||
<image href="../panda.webp" height="90" clip-path="url(#ecran)" />
|
||||
<path d="M0,0
|
||||
h115
|
||||
v62
|
||||
c0 3 -37.5 5 -57.5 5
|
||||
s-57.5 -2 -57.5 -5z
|
||||
M4,4 v54 h107 V4z" />
|
||||
<circle cx="57.5" cy="62" r="2.5" fill="white" />
|
||||
</svg>
|
||||
BIN
formes/exercice/tv/tv.png
Executable file
BIN
formes/exercice/tv/tv.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
28
formes/exercice/tv/tv.svg
Executable file
28
formes/exercice/tv/tv.svg
Executable file
@@ -0,0 +1,28 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 82">
|
||||
<defs>
|
||||
<clipPath id="ecran">
|
||||
<rect x="4" y="4" width="107" height="54.5" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="pied">
|
||||
<path d="M99.401,76.806l-18.189-3.69 -21.333-4.483c-0.099-0.368-0.166-0.778-0.197-1.22c-0.854,0.003-1.71,0.006-2.57,0.006
|
||||
s-1.716-0.003-2.573-0.006c-0.028,0.442-0.099,0.852-0.197,1.221l-21.236,4.462 -18.284,3.709c-0.93,0.179-1.533,1.039-1.343,1.92
|
||||
c0.188,0.883,1.096,1.452,2.028,1.272l40.321-7.015c0.432-0.013,0.88-0.02,1.342-0.02c0.414,0,0.814,0.007,1.203,0.017
|
||||
l40.343,7.019c0.93,0.179,1.838-0.391,2.027-1.272C100.934,77.845,100.333,76.986,99.401,76.806z"/>
|
||||
<path d="M18.519,74.021c0,0,31.385-5.191,31.475-5.683c0.208-0.084,0.075-0.533-0.118-0.519l-31.787,4.184
|
||||
c-0.588,0.113-0.969,0.656-0.85,1.214C17.357,73.773,17.932,74.133,18.519,74.021z"/>
|
||||
<path d="M96.986,73.216c0.12-0.558-0.26-1.101-0.85-1.214l-31.787-4.184c-0.193-0.014-0.326,0.435-0.118,0.519
|
||||
c0.088,0.492,31.475,5.683,31.475,5.683C96.292,74.133,96.867,73.773,96.986,73.216z"/>
|
||||
</g>
|
||||
|
||||
<image href="panda.webp" height="90" clip-path="url(#ecran)" />
|
||||
|
||||
<path d="M0,0
|
||||
h115
|
||||
v62
|
||||
c0 3 -37.5 5 -57.5 5
|
||||
s-57.5 -2 -57.5 -5z
|
||||
M4,4 v54 h107 V4z" />
|
||||
<circle cx="57.5" cy="62" r="2.5" fill="white" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
402
formes/index.md
Executable file
402
formes/index.md
Executable file
@@ -0,0 +1,402 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: Formes
|
||||
---
|
||||
|
||||
<svg width="0" height="0">
|
||||
<defs>
|
||||
<pattern id="tenthGrid" width="25" height="25" patternUnits="userSpaceOnUse">
|
||||
<path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<pattern id="fiftygrid" width="50" height="50" patternUnits="userSpaceOnUse">
|
||||
<rect width="50" height="50" fill="url(#tenthGrid)"/>
|
||||
<path d="M 50 0 L 0 0 0 50" fill="none" stroke="gray" stroke-width="1"/>
|
||||
</pattern>
|
||||
<symbol id="grid">
|
||||
<rect width="100%" height="100%" fill="url(#fiftygrid)"/>
|
||||
<path d="M 500 0 L 500 250 0 250" fill="none" stroke="gray" stroke-width="1"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
## Rectangle
|
||||
|
||||
Le rectangle est défini par les coordonnées de son sommet en haut à gauche puis par sa largeur et sa hauteur.
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<line x1="40" y1="50" x2="60" y2="50" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="50" y1="40" x2="50" y2="60" stroke="#f00000" stroke-width="3" />
|
||||
<rect x="50" y="50" width="200" height="100" fill="#3ed124" />
|
||||
<text x="125" y="45" text-anchor="middle">100</text>
|
||||
<text x="255" y="98" alignment-baseline="baseline">50</text>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<rect x="50" y="50" width="200" height="100" fill="#3ed124" />
|
||||
```
|
||||
|
||||
## Cercle
|
||||
|
||||
Le cercle est défini par les coordonnées de son centre et son rayon.
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<circle cx="100" cy="100" r="50" fill="#3ed124" />
|
||||
<line x1="100" y1="90" x2="100" y2="110" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="90" y1="100" x2="150" y2="100" stroke="#f00000" stroke-width="3" />
|
||||
<text x="115" y="95" alignment-baseline="baseline">50</text>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<circle cx="100" cy="100" r="50" fill="#3ed124" />
|
||||
```
|
||||
|
||||
## Ellipse
|
||||
|
||||
L'ellipse est définie par les coordonnées de son centre et par ses deux rayons.
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<ellipse cx="150" cy="100" rx="100" ry="50" fill="#3ed124" />
|
||||
<line x1="150" y1="50" x2="150" y2="110" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="140" y1="100" x2="250" y2="100" stroke="#f00000" stroke-width="3" />
|
||||
<text x="155" y="85">50</text>
|
||||
<text x="180" y="120">100</text>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<ellipse cx="100" cy="100" rx="100" ry="50" fill="#3ed124" />
|
||||
```
|
||||
|
||||
## Ligne droite
|
||||
|
||||
La ligne droite est définie par les coordonnées du point 1 de départ et les coordonnées du point 2 d'arrivée.
|
||||
La ligne ne peut être remplie par une couleur. Il faut définir un contour pour la voir.
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<line x1="50" y1="50" x2="250" y2="100" stroke="#f00000" stroke-width="3" fill="#3ed124" />
|
||||
<text x="50" y="42" text-anchor="middle">50, 50</text>
|
||||
<text x="250" y="120" text-anchor="middle">250, 100</text>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<line x1="50" y1="50" x2="250" y2="100" stroke="#f00000" stroke-width="3" />
|
||||
```
|
||||
|
||||
## Polyligne
|
||||
|
||||
La polykigne est une ligne brisée, non fermée, entre plusieurs points. C'est un ensemble de segments réliés entre eux. La forme est dite ouverte car le dernier point n'est pas connecté avec le premier. Elle peut tout de même être remplie avec un couleur de fond.
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<polyline points="50,200 100,125 200,175 300,50 400, 200" stroke="#f00000" stroke-width="3" fill="#3ed124" />
|
||||
<text x="3" y="198">50, 200</text>
|
||||
<text x="100" y="120" text-anchor="middle">100, 125</text>
|
||||
<text x="200" y="190" text-anchor="middle">200, 175</text>
|
||||
<text x="300" y="45" text-anchor="middle">300, 50</text>
|
||||
<text x="400" y="220" text-anchor="middle">400, 200</text>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<polyline points="50,200 100,125 200,175 300,50 400, 200"
|
||||
stroke="#f00000" stroke-width="3" fill="#3ed124" />
|
||||
```
|
||||
|
||||
### liste de points
|
||||
|
||||
La liste de points consiste en suite de 2 nombres, le premier pour l'abscisse le deuxième pour l'ordonnée. Les points et les coordonnées sont séparés au choix par un espace ou par une virgule.
|
||||
|
||||
La virgule décimale est représentée par un point : 50.425
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<polyline points="50,25 100,75 200,25 300,50 400,25" stroke="#f00000" stroke-width="3" fill="none" />
|
||||
<polyline points="50 75,100 125,200 75,300 100,400 75" stroke="#f00000" stroke-width="3" fill="none" />
|
||||
<polyline points="50 125 100 175 200 125 300 150 400 125" stroke="#f00000" stroke-width="3" fill="none" />
|
||||
<polyline points="50 175,100,225,200,175 300 200 400, 175" stroke="#f00000" stroke-width="3" fill="none" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<polyline points="50,25 100,75 200,25 300,50 400,25" ... />
|
||||
<!-- Les points sont séparés par une virgule les coordonnées par un espace -->
|
||||
|
||||
<polyline points="50 75,100 125,200 75,300 100,400 75" ... />
|
||||
<!-- Les points sont séparés par un espace les coordonnées par une virgule -->
|
||||
|
||||
<polyline points="50 125 100 175 200 125 300 150 400 125" ... />
|
||||
<!-- Les points et les coordonnées sont séparées par un espace -->
|
||||
|
||||
<polyline points="50 175,100,225,200,175 300 200 400, 175" ... />
|
||||
<!-- Les points et les coordonnées sont séparées par un espace ou ue virgule.
|
||||
Le chemin est valide mais la relecture est difficile. -->
|
||||
```
|
||||
|
||||
## Polygone
|
||||
|
||||
Le polygone est une polyligne dont le dernier point est connecté avec le premier. La forme est automatiquement fermée.
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<polygon points="50,150 150,200 250,100 200,50" stroke="#f00000" stroke-width="3" fill="#3ed124" />
|
||||
<text x="30" y="140" text-anchor="middle">50, 150</text>
|
||||
<text x="150" y="215" text-anchor="middle">150, 200</text>
|
||||
<text x="253" y="98">250, 100</text>
|
||||
<text x="198" y="46" text-anchor="middle">200, 50</text>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<polygon points="50 150, 150 205, 250 100, 350 120"
|
||||
fill="#3ed124" stroke="#f00000" stroke-width="3" />
|
||||
```
|
||||
|
||||
### Règle de remplissage
|
||||
|
||||
Dans le cas où les segments se croisent, l'attribut fill-rule définit l'algorithme à utiliser pour déterminer les parties qui sont considérées à l'intérieur de la forme.
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<polygon points="100,25 50,125 175,50 25,50 150,125"
|
||||
stroke="#f00000" stroke-width="3" fill="#3ed124" fill-rule="nonzero" />
|
||||
<polygon points="300,25 250,125 375,50 225,50 350,125"
|
||||
stroke="#f00000" stroke-width="3" fill="#3ed124" fill-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
|
||||
```svg
|
||||
<polygon points="100,25 50,125 175,50 25,50 150,125" stroke="#f00000" stroke-width="3" fill="#3ed124" fill-rule="nonzero" />
|
||||
<polygon points="300,25 250,125 375,50 225,50 350,125" stroke="#f00000" stroke-width="3" fill="#3ed124" fill-rule="evenodd" />
|
||||
```
|
||||
evenodd
|
||||
fill-rule est un attribut de présentation vous pouvez l'utiliser dans un feuille de style CSS.
|
||||
|
||||
|
||||
## Les chemins
|
||||
|
||||
Les chemins sont plus compliqués, ils intègrent des portions en ligne ou en courbe. Des commandes permettent de savoir comment dessiner chaque portion.
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<path d="M 208.2973,14.715129 A 59.083692,63.810728 0 0 0 154.73861,51.247982 59.083692,63.810728 0 0 0 41.983458,78.647627 c 0,66.976923 112.755152,155.264663 112.755152,155.264663 0,0 112.75513,-88.28774 112.75513,-155.264663 A 59.196446,63.932505 0 0 0 208.2973,14.715129 Z" fill="#3ed124">
|
||||
<path d="M 50,150
|
||||
C 100,50 225,100 350,150
|
||||
Z" fill="#3ed124"/>
|
||||
<line x1="50" y1="150" x2="100" y2="50" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="350" y1="150" x2="225" y2="100" stroke="#f00000" stroke-width="3" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<path d="M 208.2973,14.715129 A 59.083692,63.810728 0 0 0 154.73861,51.247982 59.083692,63.810728 0 0 0 41.983458,78.647627 c 0,66.976923 112.755152,155.264663 112.755152,155.264663 0,0 112.75513,-88.28774 112.75513,-155.264663 A 59.196446,63.932505 0 0 0 208.2973,14.715129 Z"
|
||||
fill="#3ed124">
|
||||
```
|
||||
|
||||
Les commandes sont définies par des lettres, les lettres majuscules prennent en compte des coordonnées absolues tandis que les lettres minuscules travaillent en coordonnées relativement au point précédent.
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<path d="M 50 125
|
||||
C 100 50 225 50 350 100
|
||||
V 200
|
||||
H 250
|
||||
Q 200 125 50 175
|
||||
Z"
|
||||
fill="#3ed124"/>
|
||||
<text x="26" y="100" text-anchor="middle">M</text>
|
||||
<text x="26" y="118" text-anchor="middle">50, 125</text>
|
||||
<text x="190" y="63" text-anchor="middle">C</text>
|
||||
<text x="360" y="90" text-anchor="middle">350, 100</text>
|
||||
<text x="360" y="145" text-anchor="middle">V</text>
|
||||
<text x="300" y="218" text-anchor="middle">H</text>
|
||||
<text x="160" y="170" text-anchor="middle">Q</text>
|
||||
<text x="38" y="147" text-anchor="middle">Z</text>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<path d="M 50 125
|
||||
C 100 50 225 50 350 100
|
||||
V 200
|
||||
H 250
|
||||
Q 200 125 50 175
|
||||
Z" />
|
||||
```
|
||||
|
||||
Si une plusieurs commandes identiques se suivent il n'est pas nécessaire de répéter la lettre de la commande. Il suffit de mettre les points les uns à la suite des autres comme pour une polyligne.
|
||||
|
||||
### Commande M, m
|
||||
`Move to` : se rendre à un point sans dessiner. Toujours pour le premier point. Ensuite si la forme complexe est consititué de plusieurs parties.
|
||||
|
||||
### Commande Z, z
|
||||
`ClosePath` Fermer le tracé : Se rendre au premier point en ligne droite. Il n’y a pas de différence entre la commande en majuscule et en minuscule.
|
||||
|
||||
### Commande L, l
|
||||
`Line to` : Line droite vers le point. Identique à polyline
|
||||
|
||||
### Commande H, h
|
||||
`Horizontal line to` : Ligne Horizontale
|
||||
|
||||
### Commande V, v
|
||||
`Vertical line to` : Ligne Verticale
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<path d="M 50 50
|
||||
V 200
|
||||
H 100
|
||||
L 150 150 200 200 250 150
|
||||
v -50
|
||||
h -50
|
||||
Z"
|
||||
fill="#3ed124"/>
|
||||
<text x="40" y="117" text-anchor="middle">V</text>
|
||||
<text x="70" y="218" text-anchor="middle">H</text>
|
||||
<text x="180" y="198" text-anchor="middle">L</text>
|
||||
<text x="258" y="137" text-anchor="middle">v</text>
|
||||
<text x="225" y="96" text-anchor="middle">h</text>
|
||||
<circle cx="150" cy="150" r="5" fill="#0000c0" />
|
||||
<circle cx="200" cy="200" r="5" fill="#0000c0" />
|
||||
<circle cx="250" cy="150" r="5" fill="#0000c0" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<path d="M 50 50
|
||||
V 200
|
||||
H 100
|
||||
L 150 150 200 200 250 150
|
||||
v -50
|
||||
h -50
|
||||
Z" />
|
||||
```
|
||||
|
||||
### Commande A, a
|
||||
`Arc` : Arc elliptique 7 nombres sont nécessaires : rayon x, rayon y, inclinaison de l'axe x en dégrés, grand côté ou petit côté, angle positif ou négatif, coordonnées du point d'arrivé.
|
||||
|
||||
Les cordonnées du centre de l'ellipse et les rayons réels sont calculés pour satisfaire les conditions des points d'arrivée.
|
||||
|
||||
Pour un rayon rx et un rayon ry donnés, il existe deux ellipses A et B pouvant connecter deux points quelconques.
|
||||
|
||||
Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre arcs possibles.
|
||||
|
||||
`large-arc-flag` (0 ou 1) détermine si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée.
|
||||
|
||||
`sweep-flag` (0 ou 1) détermine si l’arc doit commencer son mouvement à un angle négatif ou positif, permettant ainsi de choisir lequel des deux cercles est parcouru.
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<path d="M 100 100, A 100 50, 30 1 1, 250 150"
|
||||
stroke="red" stroke-width="6" fill="#3ed124" />
|
||||
<path d="M 100 100, A 100 50, 30 0 1, 250 150"
|
||||
fill="none" stroke="#00f" stroke-width="2" />
|
||||
<path d="M 100 100, A 100 50, 30 0 0, 250 150"
|
||||
fill="none" stroke="#f0f" stroke-width="2" />
|
||||
<path d="M 100 100, A 100 50, 30 1 0, 250 150"
|
||||
fill="none" stroke="#663600" stroke-width="2" />
|
||||
<text x="180" y="30" text-anchor="middle">A</text>
|
||||
<text x="180" y="95" text-anchor="middle">B</text>
|
||||
<text x="180" y="170" text-anchor="middle">C</text>
|
||||
<text x="180" y="230" text-anchor="middle">D</text>
|
||||
<circle cx="100" cy="100" r="5" fill="#0000c0" />
|
||||
<circle cx="250" cy="150" r="5" fill="#0000c0" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<path d="M 100 100, A 100 50, 30 1 1, 250 150" class="A" />
|
||||
<path d="M 100 100, A 100 50, 30 0 1, 250 150" class="B" />
|
||||
<path d="M 100 100, A 100 50, 30 0 0, 250 150" class="C" />
|
||||
<path d="M 100 100, A 100 50, 30 1 0, 250 150" class="D" />
|
||||
```
|
||||
|
||||
L'illustration dans cette page ne fonctionne pas avec Firefox.
|
||||
|
||||
### Commande Q, q, T, t
|
||||
Courbe quadratique : coordonnées du point de contrôle et coordonnées du point d'arrivée
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<path d="M 25 150
|
||||
Q 275 75, 325 150
|
||||
Z" fill="#3ed124"/>
|
||||
<line x1="25" y1="150" x2="275" y2="75" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="275" y1="75" x2="325" y2="150" stroke="#f00000" stroke-width="3" />
|
||||
<circle cx="275" cy="75" r="5" fill="#0000c0" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<path d="M 0, 150
|
||||
Q 250 75, 300 150
|
||||
Z" />
|
||||
```
|
||||
|
||||
T : Prolongation d'une courbe quadratique : Seules les coordonnées du point d'arrivée sont renseignés. Le point de contrôle de la commande T est le symétrique de la commande Q précédente.
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<line x1="25" y1="150" x2="275" y2="75" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="275" y1="75" x2="325" y2="150" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="325" y1="150" x2="375" y2="225" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="475" y1="150" x2="375" y2="225" stroke="#f00000" stroke-width="3" />
|
||||
<path d="M 25 150
|
||||
Q 275 75, 325 150
|
||||
T 475 150
|
||||
Z" fill="#3ed124"/>
|
||||
<circle cx="275" cy="75" r="5" fill="#0000c0" />
|
||||
<circle cx="375" cy="225" r="5" fill="#00ffff" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<path d="M 0, 150
|
||||
Q 250 75, 300 150
|
||||
T 450 150
|
||||
Z" />
|
||||
```
|
||||
|
||||
|
||||
### Commande C, c, S, s
|
||||
C `CurveTo` : Courbe cubique (ou courbe de Bézier) : 2 points de contrôle et un point d'arrivée
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<path d="M 50,150
|
||||
C 100 50, 225 100, 350 150
|
||||
Z" fill="#3ed124"/>
|
||||
<line x1="50" y1="150" x2="100" y2="50" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="350" y1="150" x2="225" y2="100" stroke="#f00000" stroke-width="3" />
|
||||
<circle cx="100" cy="50" r="5" fill="#0000c0" />
|
||||
<circle cx="225" cy="100" r="5" fill="#0000c0" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<path d="M 0, 150
|
||||
C 100 50, 225 100, 350 150
|
||||
T 450 150
|
||||
Z" />
|
||||
```
|
||||
|
||||
S `Shorthand CuveTo` : Prolongation d'une courbe de Bézier cubique, le premier point d'inflexion est le symétrique du point d'inflexion de la courbe précédente
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<path d="M 50 150
|
||||
C 100 50, 200 100, 250 150
|
||||
S 400 225 450 150
|
||||
Z" fill="#3ed124"/>
|
||||
<line x1="50" y1="150" x2="100" y2="50" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="250" y1="150" x2="200" y2="100" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="250" y1="150" x2="300" y2="200" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="450" y1="150" x2="400" y2="225" stroke="#f00000" stroke-width="3" />
|
||||
<circle cx="100" cy="50" r="5" fill="#0000c0" />
|
||||
<circle cx="200" cy="100" r="5" fill="#0000c0" />
|
||||
<circle cx="300" cy="200" r="5" fill="#00ffff" />
|
||||
<circle cx="400" cy="225" r="5" fill="#0000c0" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<path d="M 0, 150
|
||||
C 50 50, 150 100, 200 150
|
||||
S 350 225, 400 150
|
||||
Z" />
|
||||
```
|
||||
|
||||
L'utilisation d'un logiciel comme inkscape n'optimise pas forcement les commandes, mais cela est bien plus pratique pour dessiner des formes complexes.
|
||||
|
||||
[Exercice](exercice)
|
||||
Reference in New Issue
Block a user