stroke-linecap

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

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

使用可能な場所

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

例

<?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 を使うことができます

Shape 要素 »
Text content 要素 »