Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I'm trying to create a dashed stroke, but I can't get it to stop doing this:
As you can see, there are two overlapping dashes (indicated by the red triangle) that give the appearance of one long dash. How can I make sure that all my dashes are the same size, non-overlapping, and evenly spaced?
I've tried changing the dash density and offset, but these didn't work.
Note: This image is just an analogue to demonstrate the problem - my actual design is not a simple shape.
Thank you in advance!
I was able to reasonably duplicate your image, without fill as that aspect is inconsequential.
After creating the circle with a "stock" dashed configuration, I rotated it to ensure that the longer dash also rotated, to approximately 4:32 position. This image below is from the XML editor:
As you can see, well, you could if you click on the image, there is a parameter: stroke-dasharray:60,10; which represents the spacing for the dashes.
When changed to a different value, the entry in the stroke panel becomes custom.
This is a hasty test adjustment and may not be precisely uniform, but I suspect that one could make adjustments to ensure the desired result.
This was created by changing to stroke-dasharray:55,12;
Other values may be better suited to your objective. Larger numbers in the second position increase the space. I also expect that some math would be useful in that one could calculate the circumference and create near-integer values for the stroke and space to ensure even spacing throughout. This mathematical problem is left as an exercise to the reader.
There is a very simple way to fix such an issue, if it is still an SVG circle and has not been converted to paths.
You can engage the Circle tool, and hold down Ctrl as you click and drag one of the two square control handles. This will rescale the circle proportionally.
You can then scale the Circle until the dashes separate.
Example:
If the object has been constructed from paths or converted to paths, rather than an SVG shape, then it is also possible to deselect the Scale Stroke Width in the preferences for Transforms to enable scaling of the object to separate the dashes.
Once that has been done, you can scale the object proportionally, again by holding down Ctrl while clicking and dragging one of the corner handles, until the dashes separate. Although this is a little trickier and may require some trial and error, since the display does not refresh until you have released the mouse button.
Example
If rescaling the object is undesirable, you could place guides around the object, rescale it to separate the dashes, then in preferences enable the Scale Stroke width, and then rescale the object back to its original size.
Example
If you know the radius of the circle, and the number of dashes you want then the exact dash array can be computed using:
((2 π r) / numberOfDashes) - dashGap
So for a circle of radius 100, with 6 dashes and a gap between the dashes of 30, you'd use:
((6.283 * 100) / 6) - 30 = 74.720
stroke-dasharray="74.720 30"
The same principle works for any other shape you know the edge length of.
