stroke-linejoin
stroke-linejoin
属性は線を引いた時のパスの曲がりまたは基本的な輪郭の形状を指定します。
プレゼンテーション属性のため、直接 CSS スタイルシートの中で定義したプロパティとして使うこともできます。
注意: miter
オプションの最終的な見た目は stroke-miterlimit
属性の値の影響を受けます。
使用可能な場所
カテゴリ | プレゼンテーション属性 |
---|---|
値 | miter | round | bevel | inherit |
アニメーション | Yes |
標準文書 | SVG 1.1 (2nd Edition) |
例
html
<?xml version="1.0"?>
<svg
width="120"
height="300"
viewBox="0 0 120 300"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polyline
stroke-linejoin="miter"
points="-20,115 60,40 140,115"
stroke="black"
stroke-width="40"
fill="none" />
<polyline
stroke-linejoin="round"
points="-20,200 60,125 140,200"
stroke="black"
stroke-width="40"
fill="none" />
<polyline
stroke-linejoin="bevel"
points="-20,285 60,210 140,285"
stroke="black"
stroke-width="40"
fill="none" />
<path
d="M-20,115 L60,40 L140,115 M-20,200 L60,125 L140,200 M-20,285 L60,210 L140,285"
stroke="white"
fill="none" />
</svg>
Live sample
要素
以下の要素で stroke-linejoin
属性を使うことができます