0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>For a single-pixel stroke, all we need to do is set the color in stroke. If you need to control the width of the stroke, then you can do this using the stroke-widthproperty, an attribute, or via CSS:</p>
1
<p>For a single-pixel stroke, all we need to do is set the color in stroke. If you need to control the width of the stroke, then you can do this using the stroke-widthproperty, an attribute, or via CSS:</p>
2
<circle r="60" cx="150" cy="50%" fill="none" stroke="orange" stroke-width="5"></circle><p>or:</p>
2
<circle r="60" cx="150" cy="50%" fill="none" stroke="orange" stroke-width="5"></circle><p>or:</p>
3
circle { stroke: orange; stroke-width: 5; }<p>Result:</p>
3
circle { stroke: orange; stroke-width: 5; }<p>Result:</p>
4
<p>There is no shorthand notation, so the color and thickness are always set separately.</p>
4
<p>There is no shorthand notation, so the color and thickness are always set separately.</p>
5
<p>If you set the value as a percentage, it will not be calculated relative to the size of the shape, but to the size of the entire SVG, which can lead to unpredictable results.</p>
5
<p>If you set the value as a percentage, it will not be calculated relative to the size of the shape, but to the size of the entire SVG, which can lead to unpredictable results.</p>
6
<p>If a stroke is assigned a particular width but no color, then the stroke will not be displayed.</p>
6
<p>If a stroke is assigned a particular width but no color, then the stroke will not be displayed.</p>