--- layout: layouts/page.njk title: Propriétés --- ## Remplissage ```svg ``` La propriété fill permet de définir la couleur de remplissage. ## Contour ```svg ``` 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 ``` 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 25 50 25 50 ```svg ``` ## Fin de ligne ```svg ``` ## Jointure de l'angle ```svg ``` 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 ``` 1x 2x 3x 4x 5x 165 Θ ### Fonction de l'angle 23° 33° 53° 70° ```svg ``` Une limite à 2,6 correspond à un angle inférieur ou égal à ArcSin(1 / 2.6) soit 45° ## Pointillés 90 30 90 30 90 30 90 90 30 30 60 90 30 30 ```svg ``` `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 ``` 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 ```