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
No specification found
No specification data found for svg.global_attributes.stroke
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Browser compatibility
BCD tables only load in the browser