SVG Style Properties

2008 Dec 22


fill: <!-- the value is a CSS color, the default is black (can be none for transparent) -->
fill-opacity: <!-- 0.0 is transparent and 1.0 is opaque -->
fill-rule: <!-- one of: evenodd nonzero -->
   nonzero draw a line from an interior region and fills if the number of line crossings is nonzero
   evenodd draw a line from an interior region and fills if the number of line crossings is odd

stroke: <!-- the value is a CSS color -->
stroke-dasharray: <!-- a list of numbers -->
stroke-linecap: <!-- one of: butt (default) round square -->
stroke-linejoin: <!-- one of: bevel miter (default) round -->
stroke-miterlimit: <!-- ratio of miter to line width (default is 4) -->
stroke-opacity: <!-- 0.0 is transparent and 1.0 is opaque -->
stroke-width: <!-- in user units see viewports -->

Note that stroke properties are centered on the mathematical line or shape edge.

The list of dasharray number values can be a comma or space separated and there should be an even number (but if odd the list is implictly duplicated). The first number in an even sequence is the dash length and the second is the gap length (in user units, see viewports), with this pattern repeating.