Svg-stroke
提供：Dev Guides
SVG-ストローク
SVGは複数のストロークプロパティをサポートしています。
以下は、使用される主なストロークプロパティです。
| Sr.No. | Stroke Type & Description |
|---|---|
| 1 | stroke − defines color of text, line or outline of any element. |
| 2 | stroke-width − defines thickness of text, line or outline of any element. |
| 3 | stroke-linecap − defines different types of ending of a line or outline of any path. |
| 4 | stroke-dasharray − used to create dashed lines. |
例
テストVG
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke: </text>
<path stroke="red" d="M 50 50 L 300 50"/>
<path stroke="green" d="M 50 70 L 300 70"/>
<path stroke="blue" d="M 50 90 L 300 90"/>
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。
ストローク幅
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<text x="30" y="10" >Using stroke-width: </text>
<path stroke-width="2" stroke="black" d="M 50 50 L 300 50"/>
<path stroke-width="4" stroke="black" d="M 50 70 L 300 70"/>
<path stroke-width="6" stroke="black" d="M 50 90 L 300 90"/>
</svg>
</body>
</html>出力
ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。
ストロークラインキャップ
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke-linecap: </text>
<path stroke-linecap="butt" stroke-width="6"
stroke="black" d="M 50 50 L 300 50"/>
<path stroke-linecap="round" stroke-width="6"
stroke="black" d="M 50 70 L 300 70"/>
<path stroke-linecap="square" stroke-width="6"
stroke="black" d="M 50 90 L 300 90"/>
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。
ストロークダッシュアレイ
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<g>
<text x="30" y="30" >Using stroke-dasharray: </text>
<path stroke-dasharray="5,5" stroke-width="6"
stroke="black" d="M 50 50 L 300 50"/>
<path stroke-dasharray="10,10" stroke-width="6"
stroke="black" d="M 50 70 L 300 70"/>
<path stroke-dasharray="20,10,5,5,5,10" stroke-width="6"
stroke="black" d="M 50 90 L 300 90"/>
</g>
</svg>
</body>
</html>出力
ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。
