stroke-linecap

« SVG 属性リファレンスホーム

stroke-linecap 要素は線を引いた時の開いている部分パスの終端の形状を指定します。

プレゼンテーション属性であるため、直接 CSS スタイルシートの中で定義したプロパティとして使うこともできます。

使用可能な場所

カテゴリ プレゼンテーション属性
値 butt | round | square | inherit
アニメーション Yes
標準文書 SVG 1.1 (2nd Edition)

例

html

<?xml version="1.0"?>
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <line
    stroke-linecap="butt"
    x1="30"
    y1="30"
    x2="30"
    y2="90"
    stroke="black"
    stroke-width="20" />

  <line
    stroke-linecap="round"
    x1="60"
    y1="30"
    x2="60"
    y2="90"
    stroke="black"
    stroke-width="20" />

  <line
    stroke-linecap="square"
    x1="90"
    y1="30"
    x2="90"
    y2="90"
    stroke="black"
    stroke-width="20" />

  <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90" stroke="white" />
</svg>

Live sample

要素

以下の要素で stroke-linecap を使うことができます