stroke-width

Syntaxe

/* Valeurs de longueur et pourcentages */
stroke-width: 0%;
stroke-width: 1.414px;

/* Valeurs globales */
stroke-width: inherit;
stroke-width: initial;
stroke-width: revert;
stroke-width: revert-layer;
stroke-width: unset;

Valeurs

<length>

Les unités en pixels sont traitées de la même manière que les unités SVG (voir <number>, ci-dessus) et les longueurs basées sur la police comme em sont calculées par rapport à la valeur SVG de la taille du texte de l'élément ; les effets des autres unités de longueur peuvent dépendre du navigateur.

<percentage>

Les pourcentages se réfèrent à la diagonale normalisée de la zone d'affichage SVG courante, qui est calculée comme $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$.

<number> Non standard

Un nombre d'unités SVG, dont la taille est définie par l'espace d'unité courant.

Définition formelle

Syntaxe formelle

stroke-width = 
  [ <length-percentage> | <line-width> | <number> ]#  

<length-percentage> = 
  <length>      |
  <percentage>  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

Exemples

Différentes épaisseurs de contour

Cet exemple montre différentes syntaxes de valeurs pour la propriété stroke-width.

HTML

Tout d'abord, nous définissons cinq chemins à segments multiples, qui utilisent tous un contour noir d'une largeur de un, sans remplissage. Chaque chemin crée une série de symboles de montagne, allant de la gauche (un angle de coin peu prononcé) à la droite (un angle de coin très prononcé).

<svg viewBox="0 0 39 30" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path
      d="M1,5 l7   ,-3 l7   ,3
         m2,0 l3.5 ,-3 l3.5 ,3
         m2,0 l2   ,-3 l2   ,3
         m2,0 l0.75,-3 l0.75,3
         m2,0 l0.5 ,-3 l0.5 ,3" />
    <path
      d="M1,8 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,14 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,18 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
  </g>
</svg>

CSS

Pour les quatre premiers chemins, nous appliquons des valeurs d'épaisseur de contour par paires pour montrer comment les valeurs numériques simples et les valeurs en pixels sont équivalentes. Pour les deux premiers chemins, les valeurs sont .25 et .25px. Pour les deux suivants, les valeurs sont 1 et 1px.

Pour le cinquième et dernier chemin, une valeur de 5% est appliquée, ce qui définit une épaisseur de contour égale à cinq pour cent de la longueur de la diagonale de la zone d'affichage SVG.

path:nth-child(1) {
  stroke-width: 0.25;
}
path:nth-child(2) {
  stroke-width: 0.25px;
}
path:nth-child(3) {
  stroke-width: 1;
}
path:nth-child(4) {
  stroke-width: 1px;
}
path:nth-child(5) {
  stroke-width: 5%;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété raccourcie stroke
• La propriété stroke-dasharray
• La propriété stroke-dashoffset
• La propriété stroke-linecap
• La propriété stroke-linejoin
• La propriété stroke-miterlimit
• La propriété stroke-opacity
• La propriété fill
• L'attribut SVG stroke-width