3

I'm trying to create a dashed stroke, but I can't get it to stop doing this: enter image description here

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!

1
2

I was able to reasonably duplicate your image, without fill as that aspect is inconsequential.

dashed 01 presentation

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:

dashed 02 presentation

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.

dashed 03 presentation

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.

dashed 04 presentation

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.

1
  • This worked! Thank you! – DroidMonkey Jan 8 '20 at 21:07
0

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:

enter image description here

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.

enter image description here

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

enter image description here

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

enter image description here

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.