SVG Stroke Attributes
SVG Stroke Attributes
The stroke
attribute sets the color of the
line drawn around an element.
Here we will look at the six stroke
attributes:
-
stroke
- sets the color of the line around an element -
stroke-width
- sets the width of the line around an element -
stroke-opacity
- sets the opacity of the line around an element -
stroke-linecap
- sets the shape of the end-lines for a line or open path -
stroke-dasharray
- sets the line to show as a dashed line -
stroke-linejoin
- sets the shape of the corners where two lines meet
SVG stroke Attribute
The stroke
attribute defines the color of
the outline of an element.
The stroke
attribute can be used with the
following SVG elements: <circle>
,
<ellipse>
, <line>
, <path>
,
<polygon>
, <polyline>
,
<rect>
, <text>
,
<textPath>
, <tref>
and
<tspan>
.
The value of the stroke
attribute can be a
color name, rgb value or a hex value.
Here we use the stroke
attribute to set the
outline color for a polygon, rectangle, circle
and a text:
Here is the SVG code:
Example
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,10 0,190 100,190" fill="lime" stroke="red" />
<rect
width="150" height="100" x="120" y="50" fill="yellow" stroke="red" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue" />
<text
x="420" y="100" fill="red" stroke="blue">I love SVG!</text>
</svg>
Try it Yourself »
Here we use the stroke
attribute to define the color of
three lines:
Here is the SVG code:
Example
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="green" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
Try it Yourself »
SVG stroke-width Attribute
The stroke-width
attribute defines the width of the stroke.
The stroke-width
attribute can be used with the
following SVG elements: <circle>
,
<ellipse>
, <line>
, <path>
,
<polygon>
, <polyline>
,
<rect>
, <text>
,
<textPath>
, <tref>
and
<tspan>
.
Here we use the stroke-width
attribute to set the
width of the outline for a polygon, rectangle, circle and a text:
Here is the SVG code:
Example
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red"
stroke-width="4" />
<rect
width="150" height="100" x="120" y="50" fill="yellow" stroke="red"
stroke-width="4" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue"
stroke-width="4" />
<text
x="420" y="100" fill="red" stroke="blue"
stroke-width="4">I love SVG!</text>
</svg>
Try it Yourself »
Here we use the stroke-width
attribute to set the width of three lines:
Here is the SVG code:
Example
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red">
<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 Yourself »
SVG stroke-opacity Attribute
The stroke-opacity
attribute defines the
opacity of the stroke.
The stroke-opacity
attribute can be used with the
following SVG elements: <circle>
,
<ellipse>
, <line>
, <path>
,
<polygon>
, <polyline>
,
<rect>
, <text>
,
<textPath>
, <tref>
and
<tspan>
.
The value of the stroke-opacity
attribute goes
from 0 to 1 (or 0% to 100%).
Here we use the stroke-opacity
attribute to set the
opacity of the outline for a polygon, rectangle, circle and a text:
Here is the SVG code:
Example
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red"
stroke-width="4" stroke-opacity="0.4" />
<rect
width="150" height="100" x="120" y="50" fill="yellow" stroke="red"
stroke-width="4" stroke-opacity="0.4" />
<circle r="45" cx="350" cy="100" fill="pink" stroke="blue"
stroke-width="4" stroke-opacity="0.4" />
<text
x="420" y="100" fill="red" stroke="blue"
stroke-width="4" stroke-opacity="0.4">I love SVG!</text>
</svg>
Try it Yourself »
Here we use the stroke-opacity
attribute to set the
opacity of three lines:
Here is the SVG code:
Example
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red">
<path stroke-width="2" stroke-opacity="0.4" d="M5 20 l215 0" />
<path stroke-width="4" stroke-opacity="0.4" d="M5 40 l215 0" />
<path stroke-width="6" stroke-opacity="0.4" d="M5 60 l215 0" />
</g>
</svg>
Try it Yourself »
SVG stroke-linecap Attribute
The stroke-linecap
attribute defines different types of endings
for a line or an open path.
The stroke-linecap
attribute can be used with the
following SVG elements: <path>
,
<polyline>
,
<line>
, <text>
,
<textPath>
, <tref>
and
<tspan>
.
The value of the stroke-linecap
attribute can be
"butt", "round" or "square".
Here we use the stroke-linecap
attribute to set
different endings for three lines:
Here is the SVG code:
Example
<svg height="120" width="300" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="red"
stroke-width="16">
<path stroke-linecap="butt" d="M10 20
l215 0" />
<path stroke-linecap="round" d="M10 50 l215
0" />
<path stroke-linecap="square" d="M10 80 l215 0" />
</g>
</svg>
Try it Yourself »
SVG stroke-dasharray Attribute
The stroke-dasharray
attribute is used to create dashed lines.
The stroke-dasharray
attribute can be used with the
following SVG elements: <circle>
,
<ellipse>
, <line>
, <path>
,
<polygon>
, <polyline>
,
<rect>
, <text>
,
<textPath>
, <tref>
and
<tspan>
.
The value of the stroke-dasharray
attribute can be
"none" or a comma or space separated list of lengths/percentages that
define the lengths of dashes and gaps.
Here we use the stroke-dasharray
attribute to
create different dashed lines:
Here is the SVG code:
Example
<svg height="100" width="400" xmlns="http://www.w3.org/2000/svg">
<g
fill="none" stroke="red" stroke-width="6">
<path stroke-dasharray="5,5"
d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5
40 l215 0" />
<path stroke-dasharray="35,10" d="M5 60
l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5
80 l215 0" />
</g>
</svg>
Try it Yourself »
Here we use the stroke-dasharray
attribute to
create different dashed outlines for a polygon, rectangle and a circle:
Here is the SVG code:
Example
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,10 10,190 110,190" fill="lime" stroke="red"
stroke-width="4" stroke-dasharray="10,5" />
<rect width="150"
height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4"
stroke-dasharray="10,5" />
<circle r="45" cx="350" cy="100"
fill="pink" stroke="blue" stroke-width="4" stroke-dasharray="10,5" />
</svg>
Try it Yourself »
SVG stroke-linejoin Attribute
The stroke-linejoin
attribute defines the
shape of the corners where two lines meet.
The stroke-linejoin
attribute can be used with the
following SVG elements: <path>
,
<polygon>
, <polyline>
,
<rect>
, <text>
,
<textPath>
, <tref>
and
<tspan>
.
The value of the stroke-linejoin
attribute can be
"arcs", "bevel", "miter", miter-clip" or "round".
Here we use the stroke-linejoin
attribute to
create different corner shapes:
Here is the SVG code:
Example
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red"
stroke-width="16" stroke-linejoin="round" />
<rect width="150"
height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16"
stroke-linejoin="round" />
</svg>
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,25 10,190 110,190" fill="lime" stroke="red"
stroke-width="16" stroke-linejoin="miter" />
<rect width="150"
height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16"
stroke-linejoin="miter" />
</svg>
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
<polygon points="55,25 10,190
110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="bevel" />
<rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red"
stroke-width="16" stroke-linejoin="bevel" />
</svg>
Try it Yourself »