doc-svg/propriétés/index.md

layout, title

layout	title
layouts/page.njk	Propriétés

Remplissage

<rect fill="#3ed124" ... />

La propriété fill permet de définir la couleur de remplissage.

Contour

<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é

<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

<rect ... rx="25" ry="25" />
<rect ... rx="50" ry="50" />
<rect ... rx="25" ry="50" />

Fin de ligne

<line ... stroke-linecap="butt" />
<line ... stroke-linecap="round" />
<line ... stroke-linecap="square" />

Jointure de l'angle

<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.

<polyline stroke-miterlimit="4" />

Fonction de l'angle

<polyline stroke-miterlimit="2.6" />

Une limite à 2,6 correspond à un angle inférieur ou égal à ArcSin(1 / 2.6) soit 45°

Pointillés

<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.

<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.

<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)" />