Récupération du cours SVG
This commit is contained in:
329
propriétés/index.md
Executable file
329
propriétés/index.md
Executable file
@@ -0,0 +1,329 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: Propriétés
|
||||
---
|
||||
|
||||
<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>
|
||||
|
||||
## Remplissage
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid" />
|
||||
<rect x="50" y="50" width="300" height="150" fill="#3ed124" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<rect fill="#3ed124" ... />
|
||||
```
|
||||
|
||||
La propriété fill permet de définir la couleur de remplissage.
|
||||
|
||||
## Contour
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid" />
|
||||
<rect x="50" y="50" width="300" height="150" fill="#3ed124" stroke="red" stroke-width="20"/>
|
||||
<line x1="25" y1="50" x2="375" y2="50" stroke="black" />
|
||||
<line x1="25" y1="200" x2="375" y2="200" stroke="black" />
|
||||
<line x1="50" y1="25" x2="50" y2="225" stroke="black" />
|
||||
<line x1="350" y1="25" x2="350" y2="225" stroke="black" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<rect stroke="red" stroke-width="20" ... />
|
||||
```
|
||||
|
||||
Un contour se défini par sa couleur et par sa largeur.
|
||||
|
||||
Le contour se situe centré sur la forme, il n'est pas possible de positionner totalement à l'extérieur ou totalement à l'intérieur.
|
||||
|
||||
## Opacité
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<circle cx="100" cy="100" r="60" fill="#3ed124" fill-opacity="0.5" stroke="#f00000" stroke-width="20" />
|
||||
<circle cx="250" cy="100" r="60" fill="#3ed124" stroke="#f00000" stroke-width="20" stroke-opacity="0.5" />
|
||||
<circle cx="400" cy="100" r="60" fill="#3ed124" opacity="0.5" stroke="#f00000" stroke-width="20" opacity="0.5" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<cicle fill-opacity="0.5" .../>
|
||||
<circle stroke-opacity="0.6" .../>
|
||||
<cicle opacity="0.5" ... />
|
||||
```
|
||||
|
||||
Du fait la position du contour à cheval sur la forme, l'opacité de contour apparait différement suivant qu'elle est sur la forme ou sur le fond.
|
||||
|
||||
## Coins arrondis
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<rect x="50" y="50" width="100" height="150" rx="25" ry="25" fill="#3ed124" />
|
||||
<line x1="75" y1="45" x2="75" y2="75" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="45" y1="75" x2="75" y2="75" stroke="#f00000" stroke-width="3" />
|
||||
<text x="75" y="90">25</text>
|
||||
|
||||
<rect x="200" y="50" width="100" height="150" rx="50" ry="50" fill="#3ed124" />
|
||||
<line x1="250" y1="45" x2="250" y2="100" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="195" y1="100" x2="250" y2="100" stroke="#f00000" stroke-width="3" />
|
||||
<text x="250" y="115">50</text>
|
||||
|
||||
<rect x="350" y="50" width="100" height="150" rx="25" ry="50" fill="#3ed124" />
|
||||
<line x1="375" y1="45" x2="375" y2="100" stroke="#f00000" stroke-width="3" />
|
||||
<line x1="345" y1="100" x2="375" y2="100" stroke="#f00000" stroke-width="3" />
|
||||
<text x="360" y="118">25</text>
|
||||
<text x="382" y="85">50</text>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<rect ... rx="25" ry="25" />
|
||||
<rect ... rx="50" ry="50" />
|
||||
<rect ... rx="25" ry="50" />
|
||||
```
|
||||
|
||||
## Fin de ligne
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<line x1="25" y1="50" x2="300" y2="50" stroke="#3ed124" stroke-width="25" stroke-linecap="butt" />
|
||||
<line x1="25" y1="100" x2="300" y2="100" stroke="#3ed124" stroke-width="25" stroke-linecap="round"/>
|
||||
<line x1="25" y1="150" x2="300" y2="150" stroke="#3ed124" stroke-width="25" stroke-linecap="square"/>
|
||||
<line x1="25" y1="50" x2="300" y2="50" stroke="#000" stroke-width="3" stroke-linecap="butt"/>
|
||||
<line x1="25" y1="100" x2="300" y2="100" stroke="#000" stroke-width="3" stroke-linecap="butt"/>
|
||||
<line x1="25" y1="150" x2="300" y2="150" stroke="#000" stroke-width="3" stroke-linecap="butt"/>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<line ... stroke-linecap="butt" />
|
||||
<line ... stroke-linecap="round" />
|
||||
<line ... stroke-linecap="square" />
|
||||
```
|
||||
|
||||
## Jointure de l'angle
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid" />
|
||||
<polyline points="30.25 150 50 50 69.75 150" stroke="#f00000" stroke-width="15" stroke-linejoin="round" fill="none"/>
|
||||
<polyline points="130.25 150 150 50 169.75 150" stroke="#f00000" stroke-width="15" stroke-linejoin="miter" stroke-miterlimit="10" fill="none"/>
|
||||
<polyline points="330.25 150 350 50 369.75 150" stroke="#f00000" stroke-width="15" stroke-linejoin="bevel" fill="none"/>
|
||||
|
||||
<polyline points="230.25 150 250 50 269.75 150" stroke="#f00000" stroke-width="15" stroke-linejoin="miter-clip" stroke-miterlimit="5" fill="none"/>
|
||||
<polyline points="430.25 150 450 50 469.75 150" stroke="#f00000" stroke-width="15" stroke-linejoin="arcs" fill="none"/>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<polyline stroke-linejoin="round" />
|
||||
<polyline stroke-linejoin="miter" />
|
||||
<polyline stroke-linejoin="bevel" />
|
||||
<polyline stroke-linejoin="miter-clip" />
|
||||
<polyline stroke-linejoin="arcs" />
|
||||
```
|
||||
|
||||
round
|
||||
: Un coin arrondi est utilisé pour joindre les segments
|
||||
|
||||
miter
|
||||
: Les segments sont prolongés pour former une pointe. La prolongation s'effectue en ligne droite.
|
||||
|
||||
bevel
|
||||
: Le sommet est biseauté au point de jonction des 2 segments.
|
||||
|
||||
miter-clip
|
||||
: Compromis entre le biseau et la pointe. Si celle-ci est trop grande et dépasse la limite acceptable (voir la propriété `stroke-miterlimit` plus bas)
|
||||
Un biseau est appliqué à mi-hauteur, et non pas à l'intersection. Cette propriétés n'est pas encore implémentée dans les navigateurs.
|
||||
|
||||
arcs
|
||||
: Les segments sont prolongés pour former une pointe. La prolongation prend en compte les rayons des segments courbes. Cette propriétés n'est pas encore implémentée dans les navigateurs.
|
||||
|
||||
## Limitation des angles aigus
|
||||
|
||||
La propriété `stroke-miterlimit` définit la limite de la pointe d'un angle aigu. Quand la limite est dépassée, le sommet est converti en biseau.
|
||||
|
||||
La taille de la pointe est calculée à partir du point de jonction intérieur jusqu'au sommet, la taille est exprimée en fonction de l'épaisseur du contour.
|
||||
|
||||
Proportion de la pointe = 1 / sin( Θ / 2)
|
||||
|
||||
Épaisseur = 40\
|
||||
Points : 50,75 250,125 et 50,175\
|
||||
Demi angle = ArcTan( (125-75) / (250-50) ) = **14°**\
|
||||
Pointe = 1 / (sin (14)) = **4.12**\
|
||||
Longeur de la pointe = 4.12 x 40 = **165**
|
||||
|
||||
Dans ce cas la taille de la pointe est légèrment supérieure à **4x** l'épaisseur du contour.
|
||||
Si nous définissions la limite à 4 alors la pointe se transforme en biseau.
|
||||
|
||||
```svg
|
||||
<polyline stroke-miterlimit="4" />
|
||||
```
|
||||
|
||||
<svg width="500" height="250">
|
||||
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
|
||||
markerWidth="6" markerHeight="6"
|
||||
orient="auto-start-reverse">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#00f" />
|
||||
</marker>
|
||||
<use href="#grid"/>
|
||||
<polyline points="50 75 250 125 50 175" stroke="#f00000" stroke-width="40" stroke-miterlimit="4.13" opacity="0.1" fill="none"/>
|
||||
<polyline points="50 75 250 125 50 175" stroke="#f00000" stroke-width="40" stroke-miterlimit="4.12" fill="none"/>
|
||||
<polyline points="50 75 250 125 50 175" stroke="#000000" stroke-width="4" stroke-miterlimit="1" fill="none"/>
|
||||
<polyline points="55.137845,55.451128 332.0802,125.62657 54.511277,194.54887" fill="none" stroke="#00f" stroke-width="2"/>
|
||||
<line x1="165" x2="165" y1="50" y2="200" stroke="#00f" stroke-width="2"/>
|
||||
<line x1="205" x2="205" y1="50" y2="200" stroke="#00f" stroke-width="2"/>
|
||||
<line x1="245" x2="245" y1="50" y2="200" stroke="#00f" stroke-width="2"/>
|
||||
<line x1="285" x2="285" y1="50" y2="200" stroke="#00f" stroke-width="2"/>
|
||||
<line x1="325" x2="325" y1="50" y2="200" stroke="#00f" stroke-width="2"/>
|
||||
<line x1="365" x2="365" y1="50" y2="200" stroke="#00f" stroke-width="2"/>
|
||||
<text x="205" y="225" font-size="16" text-anchor="middle">1x</text>
|
||||
<text x="245" y="225" font-size="16" text-anchor="middle">2x</text>
|
||||
<text x="285" y="225" font-size="16" text-anchor="middle">3x</text>
|
||||
<text x="325" y="225" font-size="16" text-anchor="middle">4x</text>
|
||||
<text x="365" y="225" font-size="16" text-anchor="middle">5x</text>
|
||||
<line x1="168" y1="25" x2="324" y2="25" stroke="#00f" stroke-width="2" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
|
||||
<text x="250" y="18" font-size="16" text-anchor="middle">165</text>
|
||||
<text x="40" y="130" font-size="16" text-anchor="middle">Θ</text>
|
||||
</svg>
|
||||
|
||||
### Fonction de l'angle
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<polyline points="30 150 50 50 70 150" stroke="#f00000" stroke-width="15" stroke-miterlimit="2.6" fill="none"/>
|
||||
<text x="50" y="175" font-size="16" text-anchor="middle">23°</text>
|
||||
<polyline points="120 150 150 50 180 150" stroke="#f00000" stroke-width="15" stroke-miterlimit="2.6" fill="none"/>
|
||||
<text x="150" y="175" font-size="16" text-anchor="middle">33°</text>
|
||||
<polyline points="200 150 250 50 300 150" stroke="#f00000" stroke-width="15" stroke-miterlimit="2.6" fill="none"/>
|
||||
<text x="250" y="175" font-size="16" text-anchor="middle">53°</text>
|
||||
<polyline points="330 150 400 50 480 150" stroke="#f00000" stroke-width="15" stroke-miterlimit="2.6" fill="none"/>
|
||||
<text x="400" y="175" font-size="16" text-anchor="middle">70°</text>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<polyline stroke-miterlimit="2.6" />
|
||||
```
|
||||
|
||||
Une limite à 2,6 correspond à un angle inférieur ou égal à ArcSin(1 / 2.6) soit 45°
|
||||
|
||||
## Pointillés
|
||||
|
||||
<svg width="500" height="250">
|
||||
<use href="#grid"/>
|
||||
<line x1="50" y1="25" x2="50" y2="75" stroke="#0df" stroke-width="3" />
|
||||
<line x1="450" y1="25" x2="450" y2="75" stroke="#0df" stroke-width="3" />
|
||||
<line x1="20" y1="50" x2="50" y2="50" stroke="red" opacity="0.30"
|
||||
stroke-width="20"/>
|
||||
<line x1="450" y1="50" x2="470" y2="50" stroke="red" opacity="0.30"
|
||||
stroke-width="20"/>
|
||||
<line x1="50" y1="50" x2="450" y2="50" stroke="black"
|
||||
stroke-dasharray="90 30"
|
||||
stroke-dashoffset="30"
|
||||
stroke-width="20"/>
|
||||
<text x="65" y="25" font-size="16" text-anchor="middle">90</text>
|
||||
<text x="125" y="25" font-size="16" text-anchor="middle">30</text>
|
||||
<text x="185" y="25" font-size="16" text-anchor="middle">90</text>
|
||||
<text x="245" y="25" font-size="16" text-anchor="middle">30</text>
|
||||
<text x="305" y="25" font-size="16" text-anchor="middle">90</text>
|
||||
<text x="365" y="25" font-size="16" text-anchor="middle">30</text>
|
||||
<text x="425" y="25" font-size="16" text-anchor="middle">90</text>
|
||||
<line x1="50" y1="125" x2="50" y2="175" stroke="#0df" stroke-width="3" />
|
||||
<line x1="450" y1="125" x2="450" y2="175" stroke="#0df" stroke-width="3" />
|
||||
<line x1="50" y1="150" x2="450" y2="150" stroke="black"
|
||||
stroke-dasharray="90 30 30 60"
|
||||
stroke-dashoffset="-30"
|
||||
stroke-width="20"/>
|
||||
<text x="125" y="125" font-size="16" text-anchor="middle">90</text>
|
||||
<text x="185" y="125" font-size="16" text-anchor="middle">30</text>
|
||||
<text x="215" y="125" font-size="16" text-anchor="middle">30</text>
|
||||
<text x="260" y="125" font-size="16" text-anchor="middle">60</text>
|
||||
<text x="335" y="125" font-size="16" text-anchor="middle">90</text>
|
||||
<text x="395" y="125" font-size="16" text-anchor="middle">30</text>
|
||||
<text x="425" y="125" font-size="16" text-anchor="middle">30</text>
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<line x1="50" y1="50" x2="450" y2="50" stroke="black"
|
||||
stroke-dasharray="90 30"
|
||||
stroke-dashoffset="30"
|
||||
stroke-width="20"/>
|
||||
|
||||
<line x1="50" y1="150" x2="450" y2="150" stroke="black"
|
||||
stroke-dasharray="90 30 30 60"
|
||||
stroke-dashoffset="-30"
|
||||
stroke-width="20"/>
|
||||
```
|
||||
|
||||
`stroke-dasharray` défini le motif à répeter en alternant les pleins et les vides
|
||||
|
||||
`stroke-dashoffset` défini le départ du motif. Un nombre positif indique que l'on va commencer plus loin dans le motif, donc on aura l'impression que celui-ci se décale vers la gauche. A l'inverse un nombre négatif indique que l'on va commencer le motif en avance, celui-ci va se décaler vers la droite.
|
||||
|
||||
## Marqueurs
|
||||
|
||||
Les marqueurs sont des éléments graphiques qui seront ajoutés sur les segments au début à la fin ou sur les point intermédiaires.
|
||||
|
||||
<svg width="500" height="250">
|
||||
<defs>
|
||||
<marker id="square" viewBox="0 0 10 10" refX="5" refY="5"
|
||||
markerWidth="4" markerHeight="4" fill="red"
|
||||
orient="auto-start-reverse">
|
||||
<path d="M 0 0 h 10 v 10 h -10 v -10 z" />
|
||||
</marker>
|
||||
<marker id="arrow2" viewBox="0 0 10 10" refX="5" refY="5"
|
||||
markerWidth="6" markerHeight="6" fill="red"
|
||||
orient="auto-start-reverse">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" />
|
||||
</marker>
|
||||
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
|
||||
markerWidth="3.5" markerHeight="3.5">
|
||||
<circle cx="5" cy="5" r="5" fill="#f00000" />
|
||||
</marker>
|
||||
</defs>
|
||||
<use href="#grid"/>
|
||||
<polyline points="50,50 100,100 150,75 200,150 250,125 300,200" fill="none" stroke="red" stroke-width="3"
|
||||
marker-start="url(#square)" marker-mid="url(#dot)" marker-end="url(#arrow2)" />
|
||||
</svg>
|
||||
|
||||
```svg
|
||||
<defs>
|
||||
<marker id="square"
|
||||
viewBox="0 0 10 10"
|
||||
refX="5" refY="5"
|
||||
markerWidth="4" markerHeight="4"
|
||||
fill="red"
|
||||
orient="auto-start-reverse">
|
||||
<path d="M 0 0 h 10 v 10 h -10 v -10 z" />
|
||||
</marker>
|
||||
|
||||
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
|
||||
markerWidth="3.5" markerHeight="3.5">
|
||||
<circle cx="5" cy="5" r="5" fill="#f00000" />
|
||||
</marker>
|
||||
</defs>
|
||||
```
|
||||
|
||||
Dans un bloc de définition (voir ...) on défini
|
||||
- Un marqueur en attribuant un id pour pouvoir y faire référence dans les autres éléments
|
||||
- Une zone de travail (viewBox)
|
||||
- Un point central de référence
|
||||
- Une taille d'affichage (viewport)
|
||||
- Une orientation suivant si l'n se trouve au début ou à la fin du chemin
|
||||
- Et enfin des éléments graphiques (chemins, lignes, cercles, ...) pour dessiner le marqueur.
|
||||
|
||||
```svg
|
||||
<polyline points="50,50 100,100 150,75 200,150 250,125 300,200"
|
||||
marker-start="url(#square)"
|
||||
marker-mid="url(#dot)"
|
||||
marker-end="url(#fleche)" />
|
||||
```
|
||||
Reference in New Issue
Block a user