SVG Stroke Properties
The stroke attribute series is used to control SVG shape stroke styles, including color, width, line type, etc.
Basic Stroke Properties
| Attribute | Description |
|---|---|
stroke | Stroke color |
stroke-width | Stroke width |
stroke-opacity | Stroke opacity |
stroke-linecap | Line endpoint style |
stroke-linejoin | Line join style |
stroke-dasharray | Dash pattern |
stroke-dashoffset | Dash start offset |
stroke-miterlimit | Miter limit |
stroke (Stroke Color)
html
<svg width="400" height="100">
<!-- Different colors -->
<line x1="20" y1="30" x2="120" y2="30" stroke="#3b82f6" stroke-width="4"/>
<line x1="20" y1="50" x2="120" y2="50" stroke="rgb(239, 68, 68)" stroke-width="4"/>
<line x1="20" y1="70" x2="120" y2="70" stroke="hsl(142, 71%, 45%)" stroke-width="4"/>
<!-- Color names -->
<circle cx="180" cy="50" r="30" fill="none" stroke="coral" stroke-width="4"/>
<circle cx="260" cy="50" r="30" fill="none" stroke="steelblue" stroke-width="4"/>
<circle cx="340" cy="50" r="30" fill="none" stroke="mediumpurple" stroke-width="4"/>
</svg>stroke-width (Stroke Width)
html
<svg width="400" height="120">
<line x1="20" y1="20" x2="380" y2="20" stroke="#3b82f6" stroke-width="1"/>
<line x1="20" y1="40" x2="380" y2="40" stroke="#3b82f6" stroke-width="3"/>
<line x1="20" y1="65" x2="380" y2="65" stroke="#3b82f6" stroke-width="6"/>
<line x1="20" y1="95" x2="380" y2="95" stroke="#3b82f6" stroke-width="10"/>
</svg>stroke-opacity (Stroke Opacity)
html
<svg width="400" height="100">
<circle cx="60" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="8" stroke-opacity="1"/>
<circle cx="160" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="8" stroke-opacity="0.7"/>
<circle cx="260" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="8" stroke-opacity="0.4"/>
<circle cx="360" cy="50" r="40" fill="none" stroke="#3b82f6" stroke-width="8" stroke-opacity="0.2"/>
</svg>stroke-linecap (Endpoint Style)
Controls line endpoint shape:
html
<svg width="400" height="150">
<!-- butt (default): flat endpoint -->
<line x1="50" y1="40" x2="150" y2="40" stroke="#3b82f6" stroke-width="20" stroke-linecap="butt"/>
<text x="200" y="45" font-size="14" fill="#1f2937">butt (default) - flat endpoint</text>
<!-- round: rounded endpoint -->
<line x1="50" y1="80" x2="150" y2="80" stroke="#22c55e" stroke-width="20" stroke-linecap="round"/>
<text x="200" y="85" font-size="14" fill="#1f2937">round - rounded endpoint</text>
<!-- square: square endpoint -->
<line x1="50" y1="120" x2="150" y2="120" stroke="#ef4444" stroke-width="20" stroke-linecap="square"/>
<text x="200" y="125" font-size="14" fill="#1f2937">square - square endpoint</text>
<!-- Reference lines -->
<line x1="50" y1="20" x2="50" y2="140" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="3"/>
<line x1="150" y1="20" x2="150" y2="140" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="3"/>
</svg>stroke-linejoin (Join Style)
Controls line corner shape:
html
<svg width="400" height="180">
<!-- miter: sharp corner (default) -->
<polyline points="30,50 80,10 130,50" fill="none" stroke="#3b82f6" stroke-width="15" stroke-linejoin="miter"/>
<text x="150" y="35" font-size="14" fill="#1f2937">miter - sharp corner</text>
<!-- round: rounded corner -->
<polyline points="30,100 80,60 130,100" fill="none" stroke="#22c55e" stroke-width="15" stroke-linejoin="round"/>
<text x="150" y="85" font-size="14" fill="#1f2937">round - rounded corner</text>
<!-- bevel: beveled corner -->
<polyline points="30,150 80,110 130,150" fill="none" stroke="#ef4444" stroke-width="15" stroke-linejoin="bevel"/>
<text x="150" y="135" font-size="14" fill="#1f2937">bevel - beveled corner</text>
</svg>stroke-dasharray (Dash Pattern)
Defines dash and gap pattern:
html
<svg width="400" height="200">
<!-- Equal spaced dash -->
<line x1="20" y1="20" x2="380" y2="20" stroke="#3b82f6" stroke-width="3" stroke-dasharray="10"/>
<text x="20" y="40" font-size="12" fill="#6b7280">dasharray="10"</text>
<!-- Long and short alternating -->
<line x1="20" y1="60" x2="380" y2="60" stroke="#22c55e" stroke-width="3" stroke-dasharray="20,5"/>
<text x="20" y="80" font-size="12" fill="#6b7280">dasharray="20,5"</text>
<!-- Dotted line -->
<line x1="20" y1="100" x2="380" y2="100" stroke="#ef4444" stroke-width="3" stroke-dasharray="2,8"/>
<text x="20" y="120" font-size="12" fill="#6b7280">dasharray="2,8"</text>
<!-- Complex pattern -->
<line x1="20" y1="140" x2="380" y2="140" stroke="#8b5cf6" stroke-width="3" stroke-dasharray="15,5,5,5"/>
<text x="20" y="160" font-size="12" fill="#6b7280">dasharray="15,5,5,5"</text>
<!-- Dash-dot line -->
<line x1="20" y1="180" x2="380" y2="180" stroke="#f59e0b" stroke-width="3" stroke-dasharray="20,5,5,5,5,5"/>
<text x="20" y="200" font-size="12" fill="#6b7280">dasharray="20,5,5,5,5,5"</text>
</svg>stroke-dashoffset (Dash Offset)
Controls dash pattern start position:
html
<svg width="400" height="150">
<line x1="20" y1="30" x2="380" y2="30" stroke="#3b82f6" stroke-width="3" stroke-dasharray="20,5" stroke-dashoffset="0"/>
<text x="20" y="50" font-size="12" fill="#6b7280">offset="0"</text>
<line x1="20" y1="70" x2="380" y2="70" stroke="#3b82f6" stroke-width="3" stroke-dasharray="20,5" stroke-dashoffset="10"/>
<text x="20" y="90" font-size="12" fill="#6b7280">offset="10"</text>
<line x1="20" y1="110" x2="380" y2="110" stroke="#3b82f6" stroke-width="3" stroke-dasharray="20,5" stroke-dashoffset="25"/>
<text x="20" y="130" font-size="12" fill="#6b7280">offset="25"</text>
</svg>Line Drawing Animation
Use stroke-dasharray and stroke-dashoffset to create drawing animation:
html
<style>
.draw-line {
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: drawLine 2s ease forwards;
}
@keyframes drawLine {
to { stroke-dashoffset: 0; }
}
</style>
<svg width="400" height="100">
<path class="draw-line" d="M20,50 Q100,10 200,50 T380,50"
fill="none" stroke="#3b82f6" stroke-width="3"/>
</svg>Circular Progress Animation
html
<style>
.progress-ring {
stroke-dasharray: 283;
stroke-dashoffset: 283;
animation: progress 2s ease forwards;
transform-origin: center;
transform: rotate(-90deg);
}
@keyframes progress {
to { stroke-dashoffset: 70; } /* 75% progress */
}
</style>
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" fill="none" stroke="#e5e7eb" stroke-width="8"/>
<circle class="progress-ring" cx="50" cy="50" r="45" fill="none" stroke="#3b82f6" stroke-width="8"/>
</svg>stroke-miterlimit
Controls maximum length of miter joins:
html
<svg width="400" height="150">
<!-- Default miterlimit=4 -->
<polyline points="30,80 80,20 130,80" fill="none" stroke="#3b82f6" stroke-width="15"
stroke-linejoin="miter" stroke-miterlimit="4"/>
<text x="30" y="110" font-size="12" fill="#6b7280">miterlimit="4"</text>
<!-- Smaller miterlimit -->
<polyline points="180,80 230,20 280,80" fill="none" stroke="#22c55e" stroke-width="15"
stroke-linejoin="miter" stroke-miterlimit="2"/>
<text x="180" y="110" font-size="12" fill="#6b7280">miterlimit="2"</text>
<!-- Larger miterlimit -->
<polyline points="330,80 380,20 430,80" fill="none" stroke="#ef4444" stroke-width="15"
stroke-linejoin="miter" stroke-miterlimit="8"/>
<text x="330" y="110" font-size="12" fill="#6b7280">miterlimit="8"</text>
</svg>Practical Application Examples
Loading Animation
html
<style>
.loader {
animation: rotate 1s linear infinite;
transform-origin: center;
}
@keyframes rotate {
to { transform: rotate(360deg); }
}
</style>
<svg width="60" height="60" viewBox="0 0 60 60">
<circle class="loader" cx="30" cy="30" r="25" fill="none"
stroke="#3b82f6" stroke-width="5"
stroke-dasharray="100" stroke-dashoffset="25"
stroke-linecap="round"/>
</svg>Handwritten Signature Effect
html
<style>
.signature {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: sign 3s ease forwards;
}
@keyframes sign {
to { stroke-dashoffset: 0; }
}
</style>
<svg width="300" height="100">
<path class="signature"
d="M20,60 Q40,20 60,60 T100,60 T140,60 L160,40 L180,70 Q200,90 220,50 L250,50"
fill="none" stroke="#1f2937" stroke-width="2" stroke-linecap="round"/>
</svg>Border Styles
html
<svg width="300" height="200">
<!-- Solid border -->
<rect x="10" y="10" width="130" height="80" rx="8"
fill="white" stroke="#3b82f6" stroke-width="2"/>
<!-- Dashed border -->
<rect x="160" y="10" width="130" height="80" rx="8"
fill="white" stroke="#22c55e" stroke-width="2" stroke-dasharray="8,4"/>
<!-- Dotted border -->
<rect x="10" y="110" width="130" height="80" rx="8"
fill="white" stroke="#ef4444" stroke-width="2" stroke-dasharray="4,4"/>
<!-- Two-color border effect -->
<rect x="160" y="110" width="130" height="80" rx="8"
fill="white" stroke="#8b5cf6" stroke-width="4"/>
<rect x="160" y="110" width="130" height="80" rx="8"
fill="none" stroke="white" stroke-width="4" stroke-dasharray="10,10"/>
</svg>Icon Stroke
html
<svg width="200" height="50">
<!-- Heart icon -->
<path d="M25,15 C25,10 20,5 12.5,5 C5,5 0,12.5 0,20 C0,30 25,45 25,45 C25,45 50,30 50,20 C50,12.5 45,5 37.5,5 C30,5 25,10 25,15 Z"
fill="none" stroke="#ef4444" stroke-width="2" stroke-linejoin="round"
transform="translate(10,0)"/>
<!-- Star icon -->
<polygon points="100,5 105,20 120,20 108,28 113,45 100,35 87,45 92,28 80,20 95,20"
fill="none" stroke="#f59e0b" stroke-width="2" stroke-linejoin="round"
transform="translate(30,0)"/>
</svg>Next Steps
Now that you've mastered stroke properties, let's learn about SVG Filters Introduction!