SVG Stroke Properties
SVG Stroke Properties
SVG offers a wide range of stroke attributes. In this chapter, we will look at the following:
- stroke
- stroke-width
- stroke-linecap
- stroke-dasharray
All stroke attributes can be applied to any type of lines, text and elements like a circular outline.
SVG stroke property
Stroke attribute defines a line, or text element outline color:
Here is the SVG Code:
Examples
<G fill = "none">
<Path stroke = "red" d = "M5 20 l215 0" />
<Path stroke = "blue" d = "M5 40 l215 0" />
<Path stroke = "black" d = "M5 60 l215 0" />
</ G>
</ Svg>
try it"
For Opera users: view SVG file (right-click on the preview source SVG graphics).
SVG stroke-width attribute
Tstroke- width attributes define a line, or text element outline thickness:
Here is the SVG Code:
Examples
<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>
try it"
For Opera users: view SVG file (right-click on the preview source SVG graphics).
SVG stroke-linecap property
strokelinecap attribute defines the end of an open path of different types:
Here is the SVG Code:
Examples
<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>
try it"
For Opera users: view SVG file (right-click on the preview source SVG graphics).
SVG stroke-dasharray property
strokedasharray property used to create the dotted line:
Here is the SVG Code:
Examples
<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>
try it"
For Opera users: view SVG file (right-click on the preview source SVG graphics).