A subset of the complete set of stroke properties is:
- stroke: the method of rendering the outline with a solid colour or gradient. The possible values are the same as for the fill property. A value of none indicates that no outline is to be drawn.
- stroke-width: defines the width of the outline.
- stroke-dasharray: defines the style of the line (dotted, solid, dashed etc).
- stroke-dashoffset: for a dashed line, indicates where the dash pattern should start.
- stroke-linecap: defines the way the end of a line is rendered.
- stroke-linejoin: defines how the join between two lines is rendered.
- stroke-miterlimit: places some constraints on mitered line joins.
The set of stroke properties are illustrated below:
The property stroke-width property defines the width of the line in the units specified. All the transformations that apply to the graphic object also apply to the stroke-width. So scaling an object by a factor 2 will also double the stroke width. A value of zero is equivalent to setting the value of the property stroke to none.
Outlines are normally rendered as solid lines. To render them dashed or dotted, the stroke-dasharray property has to be set. Its value is either none to indicate a solid line or is a set of numbers that specify the length of a line segment followed by the length of the space before the next segment followed by the next line segment and so on. The diagram above shows two examples. The first (stroke-dasharray:10 10) defines a dashed line where the dashes and spaces between are 10 units long. The second example (stroke-dasharray:9 5 15 5) defines a line consisting of short and long dashes with a 5-unit space between each. If an odd number of values is given, these are repeated to give an even number. So 9 5 15 is equivalent to 9 5 15 9 5 15. Commas rather than spaces can be used to separate the values.
Normally the rendering of the outline will start with the first value in the stroke-dasharray list. If this is not what is required, the stroke-dashoffset property specifies how far into the dash pattern to start the rendering. For example, a value of 16 in the example 9 5 15 9 5 15 above would mean the stroke rendering would start 13 9 5 15 etc, that is the first dash and space plus the first 2 units of the second dash.
Line Termination and Joining
When a line or path is terminated, the normal result is to butt the end of the line (the line finishes at the end point and the end of the line is perpendicular to the direction of the line).
In the diagram above, the poor rendering this achieves when two lines are drawn from the same point is shown. To combat this, two other values can be specified by the stroke-linecap property. If set to the value round, a semi-circle is added to the end of the line while the value square extends the line by the width of the line. In both cases the rendering of two lines or paths coincident at a point will be improved.
A similar problem occurs at intermediate points in a path made up of straight line segments. The normal result is to miter the two lines (the outer edges are extended until they meet). This is not always the most pleasing effect. Two other values can be specified by the stroke-linejoin property. A value of round rounds off the join and bevel squares off the join of the two lines.
The miter line join looks particularly unattractive when the two line segments are at a small angle to each other. For the miter value of stroke-linejoin, it is possible to control the extent that the miter extends beyond the end of the line. The property stroke-miterlimit defines a value greater than 1 which is the maximum ratio allowed between the miter length and the stroke width. If this ratio is exceeded, the line join has a bevel applied to it. In the diagram above, the value of 4 bevels off the worst of the three joins while the value of 1 bevels all of the three joins.