サーチ…
構文
<polyline points="10,5 25,15 20,10" />
パラメーター
パラメータ | 詳細 |
---|---|
ポイント | points属性はポイントのリストを定義します。各点は、ユーザ座標系のax座標とy座標で定義されます。 |
ストローク幅 | ストロークの幅 |
ストローク不透明度 | 脳卒中の不透明度 |
ストロークダッシュアレイ | (オプション)ストロークのダッシュパターンを指定します |
ストロークリニアキャップ | (オプション)行末をフラッシュ、ラウンドまたは四角にするかどうかを指定します( "バット"(デフォルト)/ "ラウンド" / "スクエア")。 |
ストロークライン結合 | (オプション)線分をどのように結合するかを指定します(マイター、丸め、または斜角)(「マイター」(デフォルト)/「丸い」/「斜角」) |
ストロークマイターリミット | (オプション)マイターの最大寸法を指定します。この制限を超える結合された結合は、ベベル結合に変換されます。デフォルト= "4" |
ポリラインを含むSVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="10,5 25,15 20,10" />
</svg>
別のラインジョイン、ラインカット、ミタイリミットのポリライン
<svg width="600px" height="600px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" />
<text x="320" y="20">Default drawing stroke</text>
<g transform="translate(0,150)">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="2"/>
<text x="320" y="20">stroke-linecap="butt" (default)</text>
<text x="320" y="40">stroke-linejoin="miter"(default)</text>
<text x="320" y="60">stroke-miterlimit="2"</text>
</g>
<g transform="translate(0,300)">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
<text x="320" y="20">stroke-linecap="round" </text>
<text x="320" y="40">stroke-linejoin="round" </text>
</g>
<g transform="translate(0,450)">
<polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="square" stroke-linejoin="bevel"/>
<text x="320" y="20">stroke-linecap="square"</text>
<text x="320" y="40">stroke-linejoin="bevel"</text>
</g>
</svg>
結果
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow