CODEWITHSUNDEEP
svgsvelte
Timo
Timo

Reputation: 65

Distribute Small Dashes Along Line

How do I distribute small dashes (let’s say 10) along this line?

{#each segments as segment}
    <line x1={} x2={} y1={} y2={} />
{/each}

enter image description here

Upvotes: 0

Views: 44

Answers (1)

Stephane Vanraes
Stephane Vanraes

Reputation: 16451

This can be easily solved using pure SVG.

First we set the pathLength of the line to the (number of dashes * 2) - 1 that we would like to draw. This attribute will scale all other length based computations to this number. Then we simply set a stroke-dasharray to 1 1 to put a dash every other unit (note that this was rescaled due to pathLength

So we would get:

<line x1={} x2={} y1={} y2={} pathLength={19} stroke-dasharray="1 1" />

The reason you need to do set the length to that number is because you want the first and final dash to be visible, the following lines show the effect with different length where 1 is visible 0 is invisible

  • 1 0 1 0 1
  • 1 0 1 0 1 0

As you can see if we would just double the desired number of dashes the last one would not align with the end of the line.

Upvotes: 0

Related Questions