The “Dashes” property of lines is extremely frustrating and has serious inconsistencies. I tried drawing my own graph and wanted to experiment/control the flow of dots/dashes etc and eventually just had to outline everything adding thousands of elements to the file.
Half Start
1.The line always has a “half” start. So if you say “3,2” the first dash is actually 1.5px then it starts the 3, 2 pattern. This is counter intuitive as you are specifying the pixels yet it does something on it’s own.
This is anti-pattern to SVG dashes.
- You can’t remove this. So it always is actually offset.
3.When you try to compensate and add say a 6 to start with, the entire pattern gets thrown off. - When I tried to manually specify the dashes it seems to work, EXCEPT they are the incorrect size, and of course when the pattern restarts, the oversized first dash is incorrect.
Offset/Start on Gap
When trying to make a blank edge dash line I have to either nudge it negatively and mask the original dash or move the line positively to the start point that I want. BUT as the first dash is actually HALF SIZE I either have to add another line for the missing pixels or some other magic
What I would like:
-
Remove the half start
-
I would like to offset the dash start point Just Like SVG
Image Example:
Top line is outlined shapes in the desired layout. (NOTE the large gap between lines is also not possible)
Second line is the offset 2,3 dash. Note the 1px random starting dot for no reason.
Third line is me trying to compensate for the half start by doubling the start and I am forced to manually offset the line. Notice that it seems to work for a bit, but for some random reason the dashes/gaps are not actually 2 or 3px wide.