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

stroke-dasharray

Last updated