RedditPP Mascot

RedditPP

r/webdev • … • u/dieomesieptoch

Confused by SVG path stroke-dashoffset direction appearing to be inverted

Long story short, when the value of the stroke-dashoffset increases (let's say from 0 to 10) the actual dash(es) move toward -10.

Let's say you've got a circle path consisting of 4 nodes, with the first node at 12 o' clock, another one at 3, 6 and 9.

With a dashed stroke, when you increase the stroke-dashoffset I would expect the dashes to move clockwise, ie. from the 12 position to 3 and so on, but instead the dashes are moving towards the 9; in my mind, in a negative direction.

This is exactly opposite to how I expected an offset to behave.

Now I can live with it and just remember to invert the direction to whatever I want it to be, but I'm just curious as to \*why\* this is. I'm sure there's some logic behind it that I'm still unaware of, but I'm having a hard time finding the origin of this design decision.

Can anyone here explain (or point towards a good explanation of) why this works the way it does? Thank you!

— 0