Each feature in detail
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
bounding-box | slice | clone
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- bounding-box
- Applies to
- all elements
- Inherited
- yes?
- Percentages
- N/A
- Computed value
- as specified
- Canonical order
- per grammar
- Animation type
- discrete
Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
<color>
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- currentcolor
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- the computed color
- Canonical order
- per grammar
- Animation type
- by computed value
Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
<paint>#
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- none
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- as specified, with any <image> computed
- Canonical order
- per grammar
- Animation type
- repeatable list
Specification ↗
MDN The fill-opacity CSS property defines the opacity of the painting operation (color, gradient, pattern, etc.) applied to SVG shapes or text content elements to fill the element. The property defines the opacity of the element's fill only; it does not affect the stroke. If present, it overrides the element's fill-opacity attribute.
Live preview Example from MDN
svg {
border: 1px solid;
height: calc(100vh - 20px);
background: repeating-linear-gradient(
to bottom right,
transparent 0 10px,
#cccccc 10px 11px
);
}
svg > * {
fill: black;
}
rect:last-of-type {
fill-opacity: 0.1;
}
circle {
fill-opacity: 0.6;
}
ellipse {
fill-opacity: 40%;
}
line {
fill-opacity: 10%;
}
polyline {
fill-opacity: 50%;
}
path {
fill-opacity: 0.5;
}
circle,
ellipse {
stroke: black;
stroke-width: 3px;
}
<svg viewBox="0 0 100 150" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" fill-opacity="1" />
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" fill-opacity="1" />
<circle cx="25" cy="75" r="20" fill-opacity="1" />
<ellipse cx="75" cy="75" rx="20" ry="10" fill-opacity="1" />
<line x1="50" x2="90" y1="40" y2="60" stroke="black" stroke-width="5" />
<polyline
points="60 90 65 100 70 95 75 110 80 105 85 120 90 115 95 130 100 125"
fill-opacity="1" />
<path d="M20,130 Q40,105 50,130 T90,130" fill-opacity="1" />
</svg>
Syntax
<'opacity'>
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- 1
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- the specified value converted to a <number>, clamped to the range [0,1]
- Canonical order
- per grammar
- Animation type
- by computed value
Browser support
First browser version supporting fill-opacity | Chrome | 1 |
| Edge | ≤15 |
| Firefox | 1 |
| Safari | 4 |
| Chrome Android | 18 |
| Safari iOS | 3.2 |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
match-parent | fill-box | stroke-box | content-box | padding-box | border-box
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- match-parent
- Applies to
- all elements
- Inherited
- no
- Percentages
- N/A
- Computed value
- as specified
- Canonical order
- per grammar
- Animation type
- discrete
Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
<position>#
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- 0% 0%
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- n/a
- Computed value
- A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
- Canonical order
- per grammar
- Animation type
- repeatable list
Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
<repeat-style>#
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- repeat
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- n/a
- Computed value
- A list, each item consisting of: two keywords, one per dimension
- Canonical order
- per grammar
- Animation type
- discrete
Specification ↗
MDN The fill-rule CSS property defines the rule used to determine which parts of the SVG shape's canvas are included inside a shape to be filled. If present, it overrides the element's fill-rule attribute.
Live preview Example from MDN
svg {
border: 1px solid;
height: calc(33vh - 2.5em);
margin-bottom: 10px;
}
p {
margin: 0;
}
svg:nth-of-type(2) > * {
fill-rule: nonzero;
}
svg:nth-of-type(3) > * {
fill-rule: evenodd;
}
<p>Original SVG</p>
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
<polygon
points="180,10 150,100 220,40 140,40 210,100"
stroke="red"
fill-rule="evenodd" />
<path
d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
stroke="red"
fill-rule="nonzero" />
</svg>
<p><code>fill-rule: nonzero;</code></p>
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
<polygon
points="180,10 150,100 220,40 140,40 210,100"
stroke="red"
fill-rule="evenodd" />
<path
d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
stroke="red"
fill-rule="nonzero" />
</svg>
<p><code>fill-rule: evenodd;</code></p>
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
<polygon
points="180,10 150,100 220,40 140,40 210,100"
stroke="red"
fill-rule="evenodd" />
<path
d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
stroke="red"
fill-rule="nonzero" />
</svg>
Syntax
nonzero | evenodd
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- nonzero
- Applies to
- SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- as specified
- Canonical order
- per grammar
- Animation type
- discrete
Browser support
First browser version supporting fill-rule | Chrome | 1 |
| Edge | ≤15 |
| Firefox | 3 |
| Safari | 4 |
| Chrome Android | 18 |
| Safari iOS | 3.2 |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
<bg-size>#
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- auto
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- n/a
- Computed value
- as specified, but with lengths made absolute and omitted auto keywords filled in
- Canonical order
- per grammar
- Animation type
- repeatable list
Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
center | inset | outset
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- center
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- as specified
- Canonical order
- per grammar
- Animation type
- discrete
Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
bounding-box | slice | clone
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- bounding-box
- Applies to
- all elements
- Inherited
- ?
- Percentages
- N/A
- Computed value
- as specified
- Canonical order
- per grammar
- Animation type
- discrete
Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
<color>#
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- transparent
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- the computed color
- Canonical order
- per grammar
- Animation type
- by computed value
Browser support
First browser version supporting stroke-color | Chrome | No |
| Edge | No |
| Firefox | No |
| Safari | 11.1 |
| Chrome Android | No |
| Safari iOS | 11.3 |
First version with support, from MDN browser-compat-data.
Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
none | <length>
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- none
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- specified value, with lengths made absolute
- Canonical order
- per grammar
- Animation type
- by computed value if <length>, otherwise discrete
Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
none | [ stretch | compress ] || [ dashes || gaps ]
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- none
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- specified value, with lengths made absolute
- Canonical order
- per grammar
- Animation type
- discrete
Specification ↗
MDN The stroke-dasharray CSS property defines a pattern of dashes and gaps used in the painting of the SVG shape's stroke. If present, it overrides the element's stroke-dasharray attribute.
Live preview Example from MDN
rect {
stroke-dasharray: 10 5;
}
<svg viewBox="0 0 100 50" width="500" height="250">
<rect
x="10"
y="10"
width="80"
height="30"
fill="none"
stroke="red"
stroke-width="2" />
</svg>
Syntax
none | [<length-percentage> | <number>]+#
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- none
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- relative to the scaled viewport size
- Computed value
- as specified
- Canonical order
- per grammar
- Animation type
- repeatable list
Browser support
First browser version supporting stroke-dasharray | Chrome | 1 |
| Edge | ≤15 |
| Firefox | 1.5 |
| Safari | 4 |
| Chrome Android | 18 |
| Safari iOS | 3.2 |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The stroke-dashoffset CSS property defines an offset for the starting point of the rendering of an SVG element's associated dash array. If present, it overrides the element's stroke-dashoffset attribute.
Live preview Example from MDN
path:nth-of-type(1) {
stroke-dashoffset: 0;
}
path:nth-of-type(2) {
stroke-dashoffset: -5;
}
path:nth-of-type(3) {
stroke-dashoffset: 5;
}
path:nth-of-type(4) {
stroke-dashoffset: 5px;
}
path:nth-of-type(5) {
stroke-dashoffset: 5%;
}
<svg viewBox="0 0 100 50" width="500" height="250">
<rect x="10" y="5" width="80" height="30" fill="#eeeeee" />
<g stroke="dodgerblue" stroke-width="2" stroke-dasharray="20,3">
<path d="M 10,10 h 80" />
<path d="M 10,15 h 80" />
<path d="M 10,20 h 80" />
<path d="M 10,25 h 80" />
<path d="M 10,30 h 80" />
</g>
</svg>
Syntax
<length-percentage> | <number>
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- 0
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- relative to the scaled viewport size
- Computed value
- as specified
- Canonical order
- per grammar
- Animation type
- repeatable list
Browser support
First browser version supporting stroke-dashoffset | Chrome | 1 |
| Edge | ≤15 |
| Firefox | 1.5 |
| Safari | 4 |
| Chrome Android | 18 |
| Safari iOS | 3.2 |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
<paint>#
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- none
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- as specified, with any <image> computed
- Canonical order
- per grammar
- Animation type
- repeatable list
Specification ↗
MDN The stroke-linecap CSS property defines the shape to be used at the end of open subpaths of SVG elements' unclosed strokes. If present, it overrides the element's stroke-linecap attribute.
Live preview Example from MDN
path:nth-of-type(1) {
stroke-linecap: butt;
}
path:nth-of-type(2) {
stroke-linecap: square;
}
path:nth-of-type(3) {
stroke-linecap: round;
}
<svg viewBox="0 0 100 50" width="500" height="250">
<rect x="10" y="5" width="80" height="30" fill="#dddddd" />
<g stroke="dodgerblue" stroke-width="7">
<path d="M 10,10 h 80" />
<path d="M 10,20 h 80" />
<path d="M 10,30 h 80" />
</g>
</svg>
Syntax
butt | round | square
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- butt
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- as specified
- Canonical order
- per grammar
- Animation type
- discrete
Browser support
First browser version supporting stroke-linecap | Chrome | 1 |
| Edge | ≤15 |
| Firefox | 1.5 |
| Safari | 4 |
| Chrome Android | 18 |
| Safari iOS | 3.2 |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The stroke-linejoin CSS property defines the shape to be used at the corners of an SVG element's stroked paths. If present, it overrides the element's stroke-linejoin attribute.
Live preview Example from MDN
path:nth-child(1) {
stroke-linejoin: bevel;
}
path:nth-child(2) {
stroke-linejoin: round;
}
path:nth-child(3) {
stroke-linejoin: miter;
}
path:nth-child(4) {
stroke-linejoin: miter;
stroke-miterlimit: 2;
}
<svg viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
<g stroke="black" stroke-width="1" fill="none">
<path d="M2,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
<path d="M8,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
<path d="M2,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
<path d="M8,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
</g>
</svg>
Syntax
[ crop | arcs | miter ] || [ bevel | round | fallback ]
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- miter
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- as specified
- Canonical order
- per grammar
- Animation type
- discrete
Browser support
First browser version supporting stroke-linejoin | Chrome | 1 |
| Edge | ≤15 |
| Firefox | 1.5 |
| Safari | 4 |
| Chrome Android | 18 |
| Safari iOS | 3.2 |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The stroke-miterlimit CSS property defines a limit on the ratio of the miter length to the stroke-width when the shape to be used at the corners of an SVG element's stroked path is a mitered join. If the limit defined by this property is exceeded, the join is converted from miter to bevel, thus making the corner appear truncated.
Live preview Example from MDN
path:nth-child(1) {
stroke-miterlimit: 1.1;
}
path:nth-child(2) {
stroke-miterlimit: 1.4;
}
path:nth-child(3) {
stroke-miterlimit: 1.9;
}
path:nth-child(4) {
stroke-miterlimit: 4.2;
}
path:nth-child(5) {
stroke-miterlimit: 6.1;
}
<svg viewBox="0 0 39 36" xmlns="http://www.w3.org/2000/svg">
<g stroke="black" stroke-width="1" fill="none">
<path
d="M1,5 l7 ,-3 l7 ,3
m2,0 l3.5 ,-3 l3.5 ,3
m2,0 l2 ,-3 l2 ,3
m2,0 l0.75,-3 l0.75,3
m2,0 l0.5 ,-3 l0.5 ,3" />
<path
d="M1,12 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,33 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
</g>
</svg>
Syntax
<number>
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- 4
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- a number
- Canonical order
- per grammar
- Animation type
- discrete
Browser support
First browser version supporting stroke-miterlimit | Chrome | 1 |
| Edge | ≤15 |
| Firefox | 1.5 |
| Safari | 4 |
| Chrome Android | 18 |
| Safari iOS | 3.2 |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The stroke-opacity CSS property defines the opacity of an SVG shape's stroke. The effect is identical to that of , except it is applied only to the stroke, not to the entire element. If present, it overrides the element's stroke-opacity attribute.
Live preview Example from MDN
g path:nth-child(1) {
stroke-opacity: 0.2;
} /* equiv. 20% */
g path:nth-child(2) {
stroke-opacity: 0.4;
} /* equiv. 40% */
g path:nth-child(3) {
stroke-opacity: 0.6;
} /* equiv. 60% */
g path:nth-child(4) {
stroke-opacity: 0.8;
} /* equiv. 80% */
g path:nth-child(5) {
stroke-opacity: 1;
} /* equiv. 100% */
<svg viewBox="0 0 39 36" xmlns="http://www.w3.org/2000/svg">
<g stroke="black" stroke-width="1" fill="dodgerblue">
<path
d="M1,5 l7 ,-3 l7 ,3
m2,0 l3.5 ,-3 l3.5 ,3
m2,0 l2 ,-3 l2 ,3
m2,0 l0.75,-3 l0.75,3
m2,0 l0.5 ,-3 l0.5 ,3" />
<path
d="M1,12 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,33 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
</g>
</svg>
Syntax
<'opacity'>
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- 1
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- N/A
- Computed value
- the specified value converted to a <number>, clamped to the range [0,1]
- Canonical order
- per grammar
- Animation type
- by computed value
Browser support
First browser version supporting stroke-opacity | Chrome | 1 |
| Edge | ≤15 |
| Firefox | 1.5 |
| Safari | 4 |
| Chrome Android | 18 |
| Safari iOS | 3.2 |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
match-parent | fill-box | stroke-box | content-box | padding-box | border-box
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- match-parent
- Applies to
- all elements
- Inherited
- no
- Percentages
- N/A
- Computed value
- as specified
- Canonical order
- per grammar
- Animation type
- discrete
Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
<position>#
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- 0% 0%
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- n/a
- Computed value
- A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
- Canonical order
- per grammar
- Animation type
- repeatable list
Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
<repeat-style>#
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- repeat
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- n/a
- Computed value
- A list, each item consisting of: two keywords, one per dimension
- Canonical order
- per grammar
- Animation type
- discrete
Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax
<bg-size>#
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- auto
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- n/a
- Computed value
- as specified, but with lengths made absolute and omitted auto keywords filled in
- Canonical order
- per grammar
- Animation type
- repeatable list
Specification ↗
MDN The stroke-width CSS property defines the width of a stroke applied to the SVG shape. If present, it overrides the element's stroke-width attribute.
Live preview Example from MDN
path:nth-child(1) {
stroke-width: 0.25;
}
path:nth-child(2) {
stroke-width: 0.25px;
}
path:nth-child(3) {
stroke-width: 1;
}
path:nth-child(4) {
stroke-width: 1px;
}
path:nth-child(5) {
stroke-width: 5%;
}
<svg viewBox="0 0 39 30" xmlns="http://www.w3.org/2000/svg">
<g stroke="black" stroke-width="1" fill="none">
<path
d="M1,5 l7 ,-3 l7 ,3
m2,0 l3.5 ,-3 l3.5 ,3
m2,0 l2 ,-3 l2 ,3
m2,0 l0.75,-3 l0.75,3
m2,0 l0.5 ,-3 l0.5 ,3" />
<path
d="M1,8 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,14 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,18 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
</g>
</svg>
Syntax
[ <length-percentage> | <line-width> | <number> ]#
Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition
- Initial
- 1px
- Applies to
- text and SVG shapes
- Inherited
- yes
- Percentages
- relative to the scaled viewport size
- Computed value
- the absolute length, or percentage
- Canonical order
- per grammar
- Animation type
- by computed value
Browser support
First browser version supporting stroke-width | Chrome | 1 |
| Edge | ≤15 |
| Firefox | 1.5 |
| Safari | 4 |
| Chrome Android | 18 |
| Safari iOS | 3.2 |
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗