SVG: Les attributs de présentation

fill

L’attribut fill définit la couleur de remplissage.
On utilise la même convention de nommage des couleurs qu’en CSS: des noms (comme red), des valeurs rgb (comme rgb(255,0,0)) ou des valeurs hexadécimales (comme #FF0000).

<rect x="20" y="20" width="50" height="50" fill="#f00" />

fill-opacity

Dans un certain nombre de navigateur, il est possible d’utiliser des couleurs rgba pour rendre les formes semi-transparentes. Les spécifications définissent quant à elle l’attribut fill-opacity pour obtenir cet effet. Si on spécifie à la fois une valeur rgba et fill-opacity, les deux seront appliquées.

<rect x="20" y="20" width="50" height="50"
      fill="red" fill-opacity="0.7" />

fill-rule

fill-rule spécifie la règle de remplissage (quelles parties sont remplies ou non) quand les segments d’une forme se chevauchent. Cet attribut peut prendre deux valeurs: nonzero (par défaut) ou evenodd

<polygon fill-rule="nonzero" points="50,0 21,90 98,35 2,35 79,90"/>
<polygon fill-rule="evenodd" points="150,0 121,90 198,35 102,35 179,90"/>

evenodd:
Pour savoir si un point P est à l’intérieur de la forme, on trace une ligne horizontale (x0,yP) jusqu’au point P (xP,yP) et on compte le nombre d’intersections avec la forme: un nombre pair (ex 2), c’est que le point est à l’extérieur; impair (ex 3), qu’il est à l’intérieur
nonzero (par défaut):
On trace une ligne horizontale (x0,yP) jusqu’au point P (xP,yP), à chaque fois que la ligne coupe un segment descendant on compte +1, si c’est l’inverse on compte -1. Si le total vaut 0, le point est à l’extérieur; sinon, il est à l’intérieur

Winding Number / Non-Zero Algorithm

stroke

L’attribut stroke définit la couleur du contour.

<rect x="20" y="20" width="50" height="50"
      fill="white"
      stroke="red" />

stroke-width

stroke-width définit l’épaisseur du contour.
La ligne du contour est centrée autour du contour: si la largeur du contour est 10px, 5px du contour est à l’intérieur de la forme et 5px à l’extérieur. Si la largeur est de 1px, 1px est à l’intérieur

<rect  x="0" y="0" width="90" height="90"
      fill="white"
      stroke="blue" stroke-width="10" />

<rect x="0" y="0" width="100" height="100"
      fill="none"
      stroke="red" stroke-width="1" />

stroke-opacity

stroke-opacity définit l’opacité du contour.

Il est important de savoir que le contour recouvre partiellement le remplissage de la forme. Ainsi, un contour avec une opacité différente de 1 affichera partiellement le remplissage du dessous. Pour éviter cet effet, il est possible de placer le contour derrière le remplissage avec paint-order.

<rect x="25" y="25" width="50" height="50"
      fill="white"
      stroke="red" stroke-width="10" stroke-opacity="0.7" />

<rect x="25" y="25" width="50" height="50"
      fill="white"
      stroke="red" stroke-width="10" stroke-opacity="0.7" paint-order="stroke fill" />

stroke-linecap

stroke-linecap contrôle la forme des fins de lignes. Trois valeurs sont possibles:

butt (par défaut), ferme la ligne avec un bord droit à l’endroit où la ligne se termine.
square, ferme la ligne avec un bord droit en ajoutant la moitié de stroke-width.
round, ferme la ligne avec un bord arrondi. Le rayon de cette courbe est contrôlé par stroke-width.

<line x1="40" x2="120" y1="20" y2="20"
      stroke-linecap="butt" stroke="black" stroke-width="20" />
<line x1="40" x2="120" y1="60" y2="60"
      stroke-linecap="square" stroke="black" stroke-width="20" />
<line x1="40" x2="120" y1="100" y2="100"
      stroke-linecap="round" stroke="black" stroke-width="20" />

stroke-linejoin

stroke-linejoin contrôle la manière de dessiner la liaison entre deux segments de ligne. Trois valeurs sont possibles:

miter (par défaut), prolonge la ligne pour créer un coin carré, de telle sorte qu’il n’y ait qu’un seul angle
round, crée un coin arrondi
bevel, crée un nouvel angle pour faciliter la transition entre les deux segments

<polyline points="40 60 80 20 120 60"
          fill="none"
          stroke="black" stroke-width="20"
          stroke-linejoin="miter" stroke-linecap="butt" />

<polyline points="40 120 80 80 120 120"
          fill="none"
          stroke="black" stroke-width="20"
          stroke-linejoin="round" stroke-linecap="round" />

<polyline points="40 180 80 140 120 180"
          fill="none"
          stroke="black" stroke-width="20"
          stroke-linejoin="bevel" stroke-linecap="square" />

stroke-miterlimit

stroke-miterlimit détermine à partir de quel angle une liaison de segment de type miter sera affichée en bevel.

<path stroke="black" fill="none" stroke-linejoin="miter"
      d="M1,5 l2,-3 l2,3 m2,0 l0.5,-3 l0.5 ,3" />

<!-- petit miterlimit (1) -->
<path stroke="black" fill="none" stroke-linejoin="miter"
      stroke-miterlimit="1"
      d="M1,12 l2,-3 l2,3 m2, 0 l0.5,-3 l0.5 ,3" />

<!-- large miterlimit (8) -->
<path stroke="black" fill="none" stroke-linejoin="miter"
      stroke-miterlimit="8"
      d="M1,19 l2,-3 l2,3 m2, 0 l0.5,-3 l0.5 ,3" />

stroke-dasharray

stroke-dasharray permet de créer des lignes pointillées.
La valeur est une suite de nombres qui définissent successivement la longueur du trait puis celle de l’espace.
Si une seule valeur est donné, alors l’espace a la même taille que le trait.

<line                               x1="0" y1="1" x2="30" y2="1" stroke="black" />
<line stroke-dasharray="4"          x1="0" y1="3" x2="30" y2="3" stroke="black" />
<line stroke-dasharray="4, 1"       x1="0" y1="5" x2="30" y2="5" stroke="black" />
<line stroke-dasharray="4, 1, 2"    x1="0" y1="7" x2="30" y2="7" stroke="black" />
<line stroke-dasharray="4, 1, 2, 3" x1="0" y1="9" x2="30" y2="9" stroke="black" />

stroke-dashoffset

stroke-dashoffset définit à partir d’où commencer les pointillés sur la ligne.
Cette propriété est particulièrement intéressante pour créer des animations.

<line stroke-dasharray="4"                       x1="0" y1="1" x2="30" y2="1" stroke="black" />
<line stroke-dasharray="4" stroke-dashoffset="4" x1="0" y1="3" x2="30" y2="3" stroke="black" />

opacity

opacity définit l’opacité de l’élément.

<rect x="20" y="20" width="50" height="50"
      fill="red" fill-opacity="0.7" />

paint-order

paint-order spécifie dans quel ordre doit être dessiné le contour, le remplissage et les markers d’une forme.
La valeur par défaut, normal, dessine le remplissage, le contour, puis les markers.

Pour choisir un ordre différent, utiliser les mots-clés fill, stroke et markers, séparés par des espaces.
Si des mots-clés sont omis, ils sont dessinés dans leur ordre par défaut après ceux qui ont été spécifiés.

<text x="5" y="30">Stroke</text>
<text x="5" y="60" paint-order="stroke">Stroke</text>

transform

L’attribut transform permet d’appliquer des transformations sur un élément SVG, c’est le même principe que la propriété transform en CSS.

<g fill="grey"
 transform="rotate(-10 50 100) translate(-36 45.5) skewX(40) scale(1 0.5)">
<path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
</g>

text-anchor

Par défaut, la coordonnée x d’un texte désigne la position de son coin gauche dans le document SVG. text-anchor permet modifier ce comportement. Trois valeurs sont possibles: start, middle, end.

<text x="100" y="15" text-anchor="start">Lorem ipsum</text>
<text x="100" y="30" text-anchor="middle">Lorem ipsum</text>
<text x="100" y="45" text-anchor="end">Lorem ipsum</text>

dominant-baseline

L’attribut dominant-baseline définit l’alignement vertical du texte par rapport à son point de référence.
Les valeurs les plus utilisées sont: alphabetic, hanging et middle.

<text dominant-baseline="auto"             y="20" x="0">A</text>
<text dominant-baseline="use-script"       y="20" x="20">B</text>
<text dominant-baseline="ideographic"      y="20" x="40">E</text>
<text dominant-baseline="alphabetic"       y="20" x="60">F</text>
<text dominant-baseline="hanging"          y="20" x="80">G</text>
<text dominant-baseline="mathematical"     y="20" x="100">H</text>
<text dominant-baseline="central"          y="20" x="120">I</text>
<text dominant-baseline="middle"           y="20" x="140">J</text>
<text dominant-baseline="text-after-edge"  y="20" x="160">K</text>
<text dominant-baseline="text-before-edge" y="20" x="180">L</text>

text-decoration

L’attribut text-decoration permet de “décorer” le texte, il est identique à l’attribut CSS.

<text x="0" y="30"
      text-decoration="wavy underline">Lorem ipsum</text>

font-family

L’attribut font-family permet de modifier la police d’écriture du texte.

<text x="0" y="30">Lorem ipsum</text>
<text x="0" y="60" font-family="monospace">Lorem ipsum</text>

font-style

L’attribut font-style définit le style du texte: normal, italic, ou oblique.

<text x="0" y="30" font-style="italic">Lorem ipsum</text>

font-weight

L’attribut font-weight définit la graisse à utiliser, même principe qu’en CSS, on peut utiliser un mot-clé bold, bolder, lighter ou une valeur 100, 200, etc.

<text x="0" y="30" font-weight="bold">Lorem ipsum</text>

font-size

L’attribut font-size définit la taille de la police.

<text x="0" y="30">Lorem ipsum</text>
<text x="0" y="60" font-size="36">Lorem ipsum</text>

pointer-events

L’attribut pointer-events définit quand l’élément peut recevoir des événements de la souris. Par défaut, une forme n’est cliquable que lorsqu’elle est visible. Les valeurs possibles sont visiblePainted (par défaut), visibleFill, visibleStroke, visible, painted, fill, stroke, bounding-box, all et none.

<style>
  rect { cursor: pointer; }
</style>
<rect width="50" height="50" fill="blue">
  <title>Rectangle</title>
</rect>
<rect width="50" height="50" x="50" fill="red" pointer-events="none">
  <title>Rectangle</title>
</rect>

visibility

L’attribut visibility définit si l’élément est visible ou non. Un élément invisible prend tout de même de la place.

<text x="5" y="30">
  <tspan visibility="hidden">Lorem</tspan>
  <tspan>ipsum</tspan>
</text>

display

L’attribut display définit si l’élément doit être affiché ou non, et si oui comment.
Les valeurs les plus utiles sont: none et inline (par défaut).

<text x="5" y="30">
  <tspan display="none">Lorem</tspan>
  <tspan>ipsum</tspan>
</text>

This site is open source. Improve this page.