stroke-dasharray
dash style
💾 https://replit.com/@pegasusroe/svg-stroke-dasharray
stroke-dasharray="7,5,3" 代表 "7,5,3,7,5,3",系統會自動將「單數」的虛線模式改為「雙數」。
// on off on off on off
▨▨▨▨▨▨▨ ▨▨▨ ▨▨▨▨▨ ▨▨▨▨▨▨▨ ▨▨▨ ▨▨▨▨▨
╰- 7 -╯╰ 5 ╯╰3╯╰- 7 -╯╰ 5 ╯╰3╯╰- 7 -╯╰ 5 ╯╰3╯╰- 7 -╯╰ 5 ╯╰3╯
<svg viewBox="30 0 340 230" xmlns="http://www.w3.org/2000/svg">
<g id="dashes">
<!-- on off: 4 4 ... -->
<rect
x="50" y="20" width="300" height="50"
fill="hsla(30, 100%, 50%, 0.3)" stroke="#000000" stroke-width="1"
stroke-dasharray="4"
></rect>
<!-- on off: 10 5 ... -->
<rect
x="50" y="90" width="300" height="50"
fill="hsla(60, 100%, 50%, 0.3)" stroke="#000000" stroke-width="2"
stroke-dasharray="10 5"
></rect>
<!-- on off: 16 4 4 4 ... -->
<rect
x="50" y="160" width="300" height="50"
fill="hsla(90, 100%, 50%, 0.3)" stroke="#000000" stroke-width="4"
stroke-dasharray="16 4 4 4"
></rect>
</g>
</svg>
Result
Last updated
Was this helpful?