SVGストロークのプロパティ
SVGは、ストローク特性の広い範囲を提供しています。 この章では、次のようになります：
- ストローク
- ストローク幅
- 脳卒中このlinecap
- 脳卒中dasharray
すべてのストローク特性は、線、テキスト、円状要素の輪郭のいかなる種類にも適用することができます。
SVGストロークプロパティ
ストロークプロパティは、要素のライン、テキストやアウトラインの色を定義します。
ここでSVGコードは次のとおりです。
例
<svg height="80" width="300">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
»それを自分で試してみてください SVGストローク幅プロパティ
ストローク-widthプロパティは、要素のライン、テキストやアウトラインの太さを定義します。
ここでSVGコードは次のとおりです。
例
<svg height="80" width="300">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
»それを自分で試してみてください SVGストローク-このlinecapプロパティ
ストローク-このlinecapプロパティがオープンパスに語尾の異なるタイプを定義しています。
ここでSVGコードは次のとおりです。
例
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
»それを自分で試してみてください SVGストロークdasharrayプロパティ
脳卒中dasharrayプロパティは破線を作成するために使用されます：
ここでSVGコードは次のとおりです。
例
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
»それを自分で試してみてください