# stroke-dasharray

:floppy\_disk: [https://replit.com/@pegasusroe/svg-stroke-dasharray](https://replit.com/@pegasusroe/svg-stroke-dasharray#index.html)

{% hint style="danger" %}
stroke-dasharray="**7,5,3**" 代表 "**7,5,3,7,5,3**"，系統會自動將「**單數**」的虛線模式改為「**雙數**」。
{% endhint %}

```c
// on   off  on  off   on  off
▨▨▨▨▨▨▨     ▨▨▨       ▨▨▨▨▨   ▨▨▨▨▨▨▨     ▨▨▨       ▨▨▨▨▨   
╰- 7 -╯╰ 5 ╯╰3╯╰- 7 -╯╰ 5 ╯╰3╯╰- 7 -╯╰ 5 ╯╰3╯╰- 7 -╯╰ 5 ╯╰3╯
```

{% tabs %}
{% tab title="SVG" %}

```markup
<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](https://2af1f95b-5320-41ce-9868-60b67cc9c289.id.repl.co/svg/dash.svg)
{% endtab %}

{% tab title="notes" %}

{% endtab %}
{% endtabs %}