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.
You can use this attribute with the following SVG elements:
<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 |
|---|
| Scalable Vector Graphics (SVG) 2 # SpecifyingStrokePaint |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
stroke |
No | No | 3 | No | No | No | No | No | 4 | No | No | No |
context-stroke |
No | No | 111 | No | No | No | No | No | 111 | No | No | No |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke