In addition to its color properties, there are a few other attributes available to control the way a stroke is drawn on a line.
<?xml version="1.0" standalone="no"?>
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
<line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
<line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>
The stroke-width
property defines the width of this stroke. Strokes are drawn centered around the path. In the example above, the path is shown in pink, and the stroke in black.
The second attribute affecting strokes is the stroke-linecap
property, demonstrated above. This controls the shape of the ends of lines.
There are three possible values for stroke-linecap
:
-
butt
closes the line off with a straight edge that's normal (at 90 degrees) to the direction of the stroke and crosses its end. -
square
has essentially the same appearance, but stretches the stroke slightly beyond the actual path. The distance that the stroke goes beyond the path is half the stroke-width
. -
round
produces a rounded effect on the end of the stroke. The radius of this curve is also controlled by the stroke-width
.
Use stroke-linejoin
to control how the joint between two line segments is drawn.
<?xml version="1.0" standalone="no"?>
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
<polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
stroke-linecap="round" fill="none" stroke-linejoin="round"/>
<polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
</svg>
Each of these polylines has two segments. The joint where the two meet is controlled by the stroke-linejoin
attribute. There are three possible values for this attribute. miter
extends the line slightly beyond its normal width to create a square corner where only one angle is used. round
creates a rounded line segment. bevel
creates a new angle to aid in the transition between the two segments.
Finally, you can also use dashed line types on a stroke by specifying the stroke-dasharray
attribute.
<?xml version="1.0" standalone="no"?>
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
<path d="M 10 75 L 190 75" stroke="red"
stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>
The stroke-dasharray
attribute can take a series of comma and/or whitespace separated numbers as its argument.
The first number specifies a distance for the filled area, and the second a distance for the unfilled area. So in the above example, the second path fills 5 pixel units, with 5 blank units until the next dash of 5 units. You can specify more numbers if you would like a more complicated dash pattern. The first example specifies three numbers, in which case the renderer loops the numbers twice to create an even pattern. So the first path renders 5 filled, 10 empty, 5 filled, and then loops back to create 5 empty, 10 filled, 5 empty. The pattern then repeats.
There are additional stroke
and fill
properties available, including fill-rule,
which specifies how to color in shapes that overlap themselves; stroke-miterlimit
, which determines if a stroke should draw miters; and stroke-dashoffset, which specifies where to start a dasharray on a line.