Properties and values (strokes)

stroke

example:

<path style="stroke:white">
values: none, current-color, <color>

The "stroke" property determines whether an element has a stroke or not, and if so, what color. "Current-color" will return the color value specified in a parent document such as the XML file in which the SVG resides.

stroke-width

example:

<path style="stroke-width:2">
values: <width>, inherit

The "stroke-width" property determines the width of the stroke in user units with 1 as the default. Percentages can also be specified, where the percent of the SVG viewport is applied as the value.

stroke-linecap

example:

<path style="stroke-linecap:square">
values: butt, round, square, inherit

The "stroke-linecap" property determines the shape to be used at the end of open paths. "Butt" is the default.

stroke-linejoin

example:

<path style="stroke-linejoin:bevel">
values: miter, round, bevel, inherit

The "stroke-linejoin" property determines the shape to be used at corners of paths. "Miter" is the default.

stroke-miterlimit

example:

<path style="stroke-miterlimit:4">
values: <miterlimit>, inherit

The "stroke-miterlimit" property determines the how far the miter extends where two line segments meet at a sharp angle. The value must be greater than 1, and corresponds to the values seen in Illustrator's "stroke options: miterlimit". "8" is the default value.

stroke-dasharray

example:

<path style="stroke-dasharray:12 12">
values: <dasharray>, inherit

The "stroke-dasharray" property determines the pattern of dashes and gaps for a dashed line. Again, see Illustrator's "stroke options:dashed line" for examples.

Enter any values for the stroke-dasharray in the six boxes below, then click the Set button to change the grid:
(You can leave some or all of the boxes blank.)

           

view JavaScript source

Next lesson: Gradients

Copyright ©2000 Adobe Systems Incorporated. All rights reserved.
Terms of Use
Online Privacy Policy