SVG Stroke Attribute

The 'stroke' attribute defines the color of the outline of the given graphic element. Its default value is 'none'.

　Common properties include:

1. stroke-width

2. stroke-linecap

3. stroke-linejoin

4. stroke-miterlimit

5. stroke-dasharray + stroke-dashoffset

6. stroke-opacity

Style properties

The CSS style stroke and fill specify the internal properties of SVG shapes. Here is an example:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<circle　cx="50"　cy="50"　r="50"　style="stroke:　#000066;　fill:　3333ff;"　/>
</svg>

In this example, a circle with a deeper blue stroke color and a lighter blue fill color is defined.

Stroke Example

The stroke of an SVG shape is the outline of the shape. Here is an SVG stroke example:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

In this example, a circle with a black (#000000) stroke color and no fill is defined. The effect of the image after running:

Stroke & Fill Example

You can combine SVG stroke and fill colors to form SVG shapes. Here is an example of SVG stroke and fill:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　#3333ff;"　/></svg>

In this example, a deeper blue (#000066）stroke color and a lighter blue (#3333ff) filled circle. The effect of the image after running:

stroke-width

SVG has stroke-width defines the CSS property of the stroke width. This is an SVG stroke-width example：

stroke-width:　3px;

In this example, the stroke width is set to3pixels. You can use units other than pixels. InView all available units in the SVG coordinate system unit.

Here are four different examples of stroke-width：

<svg　width="500"　height="120">
<circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　1px;"　/>
<circle　cx="150"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　3px;"　/>
<circle　cx="250"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　6px;"　/>
<circle　cx="350"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　12px;"　/>
</svg>

image effect after running:

stroke cap (stroke-linecap)

SVG CSS property　stroke-linecap defines how the end of an SVG line is presented. The CSS property stroke-linecap has three possible values. These are:

butt
square
round

This value produces a line cap with butt, which will cut the end of the line precisely. This value makes the line cap look like butt (cut off) but slightly extends beyond the end of the line. This value rounds the upper limit of the line.

There are three SVG strokes-linecap shows these three examples of stroke-The value of linecap (sequence = butt, square, round):

This example defines three green lines, where a stroke-width is10to better illustrate the effect of stroke-linecap CSS property. Each green line drawn with stroke-width of1This line has the same x1, y1and x2, y2Coordinates are green lines, but without-linecap set. So, you can see the effect of different stroke-linecap value differences.

pen line connection (stroke-linejoin)

The CSS property stroke-The CSS property stroke-linejoin can take one of the three values. These values are:

miter
round
bevel

These are three SVG stroke-linejoin example, they illustrate these different values:

<svg　width="500"　height="120">
<path　d="M20,100　l20,-50　l20,50"
　　　　　　style="stroke: #000000;        fill:none;stroke-width:16px;stroke-linejoin: miter;"    ></path>
<text　x="22"　y="20">miter</text>
<path　d="M120,100　l20,-50　l20,50"
　　　　　　style="stroke: #000000;        fill:none;stroke-width:16px;stroke-linejoin: round;"    ></path>
<text　x="122"　y="20">round</text>
<path　d="M220,100　l20,-50　l20,50"
　　　　　　style="stroke: #000000;        fill:none;stroke-width:16px;stroke-linejoin: bevel;"    ></path>
<text　x="222"　y="20">bevel</text>
</svg>

stroke-miterlimit

style stroke-miterlimit attribute with stroke-linejoin together. If stroke-linejoin is set to miter, then stroke-miterlimit can be used to limit the distance between the points of intersection of two lines (line angle extension).

This is an SVG stroke-miterlimit example:

<svg　width="500"　height="120">
<path　d="M20,100　l20,-50　l20,50"
　　　　　　style="stroke: #000000;        fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter;    stroke-miterlimit:　1.0;
　　　　　　　　　　　　　"　></path>
<text　x="29"　y="20">1.0</text>
<path　d="M120,100　l20,-50　l20,50"
　　　　　　style="stroke: #000000;        fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter;    stroke-miterlimit:　2.0;
　　　　　　　　　　　　　"　></path>
<text　x="129"　y="20">2.0</text>
<path　d="M220,100　l20,-50　l20,50"
　　　　　　style="stroke: #000000;        fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter;    stroke-miterlimit:　4.0;
　　　　　　　　　　　　　"　></path>
<text　x="229"　y="20">4.0</text>
</svg>

Please note stroke-miterlimit, how three paths use three different values, otherwise they look almost the same. The image effect after running:

The length of the line connection is called miter length. The miter length is measured from the inner angle of the connection line to the tip of the connection line. In this image, the miter length is drawn in red at the top of the connection line and repeated again on the right side of the connection line:

It can be imagined that the wider the travel, the greater the angle between the connecting lines, and the longer the miter time.

In stroke-The miterlimit actually sets the upper limit of the ratio between miter length and stroke width. Therefore, the stroke-miterlimit为1miterlimit is1 .0 indicates that the maximum length of the bevel is1x stroke width. The bevel extends beyond this range.-.0 is the stroke

The minimum possible value of miterlimit.1The following are some examples using-.0as　stroke

Note that when the angle is large, the cut-off part of the bevel is larger. This is because sharp angles naturally produce longer bevels. The example of miterlimit value, but the angle of the connecting line is different:

stroke-dasharray + stroke-dashoffset

SVG CSS property　stroke-dasharray is used to draw the stroke of the SVG shape in dashed form. It is called 'dash array' because you provide a numeric array as the value. These values define the length of the dash and space. Therefore, you should provide an even number of digits.

This is an SVG stroke-dasharray example:

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="120"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;　　stroke-dasharray:　10　5"　　/>
</svg>

In this example, a stroke with a dashed line is defined, with the width of the dashed part10pixels, the space between the dashes is5pixels. The image effect after running:

The following are some examples with different dash and space widths:

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="120"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　5"　　></line>
<line　x1="20"　y1="40"　x2="120"　y2="40"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　10"　　></line>
</svg>

the first line with10starting with the dashed line width5pixels apart, followed by5pixels of dashed lines, followed by5pixels and another spacing. Then repeat the pattern.

the second line with the dashed line width10starting with5pixels apart, followed by5pixels of dashed lines, followed by10pixels apart.

image effect after running:

stroke-dashoffset is used to set the distance at which the dashed line mode starts. This allows you to start drawing from the middle of a pattern, for example, from the middle of a pattern, and then repeat the pattern from there. This is an SVG stroke-dashoffset example:

<svg　width="500"　height="120">
<line　x1="20"　y1="20"　x2="170"　y2="20"
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5;　　stroke-dashoffset:　5;
　　　　　　"　　/>
</svg>

In this example, dash is set to-offset is5pixels, which means the rendering of the dashed line will be5pixels, the dashed line mode starts (not all browsers fully support this feature). The image effect after running:

stroke-opacity

SVG CSS property stroke-opacity is used to define the opacity of the SVG shape outline. stroke-opacity is set to 0 and1The decimal numbers between the stroke are closer to 0, the more transparent the line path. The closer this value is to1, the less transparent the stroke becomes. The default stroke-The opacity value1, indicating completely transparent strokes.

This is an SVG stroke-An example of opacity, showing three lines with different strokes-Line of text at the top of the opacity text:

<svg　width="500"　height="120">
　　　　<text　x="22"　y="40">Text　Behind　Shape</text>
　　　　<path　d="M20,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.3;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M80,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.7;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M140,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　1;
　　　　　　　　　　　　　　　　　"　></path>
</svg>

This is the generated image. Please note that the text behind becomes less visible as it is moved further back.