Value

Description

Default Behavior
(if no value is defined)

stroke:

Renders the outline of a shape with a solid color or gradient.

The shape will not be outlined.

stroke-width:

Defines the width of the outline

The stroke will be 1 pixel wide.

stroke-opacity

Defines the opacity of the outline. Number from 0 to 1. (0 - totally transparent; 1 - totally opaque)

SVG will render the stroke as opaque.

stroke-dasharray

Defines the style of the line (dotted, solid, dashed)

The stroke will be 1 pixel wide.

dashoffset

Specifies the distance into the dash pattern to start the dash

The dashoffset value will be 0.

stroke-linecap

Defines the way the end of a line is rendered. (butt, round, or square)

SVG will use the "butt" option as a default.

sroke-linejoin

Defines how the join between two lines is rendered. (mitre, round, or bevel)

SVG will use the "mitre" option as a default.

stroke-mitrelimit

Defines a limit to the length of the mitred line joins so that it won't extend too far beyond the thickness of the lines that are joined.

SVG will set the mitrelimit to 4.

Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu.
Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="600" height="700">

<!-- stroke-width -->
<line x1="63" y1="10" x2="113" y2="10"
style="stroke:red; stroke-width:10" />

<!-- stroke-dasharray -->
<line x1="3" y1="120" x2="160" y2="120" style="stroke:purple;stroke-width:3; stroke-dasharray:8 8" />
<line x1="3" y1="140" x2="160" y2="140" style="stroke:purple; stroke-width:3; stroke-dasharray:6 3 15 3" />

<!-- stroke-dashoffset -->
<line x1="3" y1="180" x2="160" y2="180"
style="stroke:brown; stroke-width:3; stroke-dasharray:20 5; stroke-dashoffset:10" />

<!-- stroke-linecap -->
<line x1="45" y1="300" x2="45" y2="270" style="stroke-width:12; stroke-linecap:butt" />
<line x1="102" y1="300" x2="102" y2="270" style="stroke-width:12; stroke-linecap:round" />
<line x1="159" y1="300" x2="159" y2="270" style="stroke-width:12; stroke-linecap:square" />

<!-- stroke-linejoin -->
<path d="M10,340v20h75z" style="stroke-linejoin:miter; stroke:blue;stroke-width:8" />
<path d="M10,380v20h75z" style="stroke-linejoin:round; stroke:blue;stroke-width:8" />
<path d="M10,420v20h75z" style="stroke-linejoin:bevel; stroke:blue;stroke-width:8" />

<!-- stroke-miterlimit -->
<path d="M10,460h150v40z" style="stroke:green;stroke-width:8; stroke-linejoin:miter;stroke-miterlimit:1" />

</svg>

Stroke-width property: Note that all the transformations also apply to the stroke-width. So scaling an object by a factor 2 will also double the stroke width.

Stroke-dasharray property: Its value is a set of numbers that specify the length of a line segment followed by the length of the space before the next line segment and so on. The first example (stroke-dasharray:8 8) defines a dashed line where the dashes and spaces between are 8 units long. The second example (stroke-dasharray:6 3 15 3) defines a line consisting of short and long dashes with a 3-unit space between each. Commas rather than spaces can be used to separate the values.

Stroke-dashoffset property: Specifies how far into the dash pattern to start the rendering. For example, a value of 10 in the example (stroke-dasharray:20 5) would mean the stroke rendering would start at the 10th unit of the first dash.

Stroke-linecap property: When a line or path is terminated, the normal result is to butt the end of the line. Two other values can be specified. If the stroke-linecap value set to '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.

Stroke-linejoin property: When two or more straight line segments joining together, the normal result is to miter the two lines (the outer edges are extended until they meet). 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.

Stroke-miterlimit property: 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 value of stroke-miterlimit must be a number greater than 1. A value of 4 bevels off the worst of the three joins while the value of 1 (in our example) bevels all of the three joins.