Propriété CSS stroke-linecap

La propriété stroke-linecap définit les point du début et de la fin d'une bordure sur un élément.

Valeur initiale butt
Appliquée à Formes de contenu de texte.
Héritée Oui.
Animable Non.
Version SVG 1.1 Specification
Syntaxe DOM Object.strokeLinecap = "round";

Syntaxe

stroke-linecap: butt | square | round | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemple de la propriété stroke-linecap </h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "butt" value -->
      <path d="M1,1 h4" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!-- Effect of the "butt" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!--
        les liens roses suivantes surlignent 
        la position du chemin pour chaque trait
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>

Un autre exemple avec la valeur "round":

Exemple

<!DOCTYPE html>
<html>
<head>
  <title>Titre du document</title>
</head>
<body>
  <h2>Exemple de la propriété stroke-linecap</h2>
  <svg viewBox="0 0 6 4">
    <!-- Effect of the "round" value -->
    <path d="M1,1 h4" stroke="#8ebf42"
      stroke-linecap="round" />
    <!-- Effect of the "round" value on a zero length path -->
    <path d="M3,3 h0" stroke="#8ebf42"
      stroke-linecap="round" />
    <!--
      les liens roses suivantes surlignent
      la position du chemin pour chaque trait
      -->
    <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
    <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
    <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
    <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
  </svg>
  </body>
</html>

Un exemple avec la valeur"square":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemple de la propriété stroke-linecap </h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "square" value -->
      <path d="M1,1 h4" stroke="#8ebf42"
        stroke-linecap="square" />
      <!-- Effect of the "square" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42"
        stroke-linecap="square" />
      <!--
        les liens roses suivantes surlignent
        la position du chemin pour chaque trait
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>

Valeurs

Valeur Description
butt Termine le trait avec un angle aigu. Sur un sous-chemin de longueur 0, le chemin ne sera pas rendu. C'est la valeur initiale de cette propriété.
square Étend le trait au-delà de la longueur du chemin.
round Fait les points du début et de la fin ronds.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées