stroke
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:
Example
html
<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>
Usage notes
Value | <paint> |
---|---|
Default value | none |
Animatable | Yes |
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # SpecifyingStrokePaint |
Browser compatibility
BCD tables only load in the browser