SVG: Shape Styles
This page shows the basic style attributes for SVG shapes.
For ways to specify SVG style, see: SVG: Specifying Styles .
Style Attributes
Here is a list of the most basic style attributes for SVG shape elements.
stroke
-
- Default is
none
- Value is a CSS Color or
none
.
- Default is
stroke-width
-
- Default is
1
- Value is a length value or percentage (e.g.
1%
), relative to view port. . - length value can be a CSS Unit, e.g.
2px
(note, CSS length requires a unit), or just a integer. If just a integer, it means the unit of current coordinate.
- Default is
stroke-dasharray
-
- Default is
none
- Value should be a sequence of pairs of numbers, e.g.
10 2
. - If missing one, first value is used to fill last value.
stroke-dasharray:20 5
stroke-dasharray:10 5 90 30
- Default is
stroke-linecap
-
- Default is
butt
- Shape of ends of line.
- Possible values are:
butt
,round
,square
.
stroke-linecap:butt
stroke-linecap:round
stroke-linecap:square
<svg width="100" height="100"> <line x1="20" y1="50" x2="80" y2="50" style="stroke:blue; stroke-width:20; stroke-linecap:butt" /> </svg>
- Default is
stroke-linejoin
-
- Default is
miter
- Shape of polygon bend.
- Possible values are:
miter
,round
,bevel
.
stroke-linejoin:miter
stroke-linejoin:round
stroke-linejoin:bevel
<svg width="200" height="200"> <polygon points=" 0 0 150 150 150 100 0 100 " style="stroke: blue; fill: yellow; stroke-width:20; stroke-linejoin:bevel " /> </svg>
stroke-linejoin:bevel
- Default is
stroke-miterlimit
-
- Default is
4
- Value is a integer.
- max ratio of miter point to line thickness.
- Default is
stroke-opacity
-
- Default is
1
- Value is 0 to 1.
- Value of 0 means transparent.
- Default is
fill
-
- Default is
black
- Value is a CSS Color or
none
.
- Default is
fill-opacity
-
- Default is
1
- Value is 0 to 1. Value of 0 means transparent.
<svg width="100" height="100"> <rect x="9" y="0" width="30" height="80" style="fill:green; stroke:blue; stroke-width:20; stroke-opacity:.5; fill-opacity:.5" /> <circle cx="70" cy="70" r="50" style="fill:yellow; stroke:red; stroke-width:20; stroke-opacity:.5; fill-opacity:.5" /> </svg>
- Note: A shape is filled before its outline is drawn.
- Half of stroke's width overlap with fill.
- This is particularly pronounced when stroke is thick (big
stroke-width
).
- Default is
fill-rule
-
- Default is
nonzero
- Possible values are:
nonzero
,evenodd
,inherit
. - This is used when a shape intersect itself.
- The value is used to determine coloring of interior.
- Default is