The stroke attribute is a presentation attribute defining the color (or any SVG paint servers like gradients or patterns) used to paint the outline of the shape;
Note: As a presentation attribute stroke can be used as a CSS property.
As a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- Simple color stroke --> <circle cx="5" cy="5" r="4" fill="none" stroke="green" /> <!-- Stroke a circle with a gradient --> <defs> <linearGradient id="myGradient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </linearGradient> </defs> <circle cx="15" cy="5" r="4" fill="none" stroke="url(#myGradient)" /> </svg>
| Value | <paint> |
|---|---|
| Default value | none |
| Animatable | Yes |
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 The definition of 'stroke' in that specification. | Candidate Recommendation | Definition for shapes and texts. Adds context-fill and context-stroke. |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'stroke' in that specification. | Recommendation | Initial definition for shapes and texts |
| Desktop | ||||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
| Basic support | ? | ? | ? | ? | ? | ? |
| Mobile | |||||||
|---|---|---|---|---|---|---|---|
| Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | ? | ? | ? | ? | ? | ? | ? |
Note: For information on using the context-stroke (and context-fill) values from HTML documents, see the documentation for the non-standard -moz-context-properties property.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke