4

I try to draw a circle like this:

dashed circle with specific pattern

I can draw stroke on circle using Object → Fill and Stroke but I can’t set the pattern that way (stroke thickness, long line and small line length, gap length etc.).

How can I draw that circle?

UPD: Thank you all for the answers. More accurate method in accepted answer solve my problem.

5

You can change the dash pattern in Inksape's XML Editor

Make sure you have the object selected first and make sure you already added a dash in the Fill & Stroke panel's Stroke Style tab, then open the XML editor Shift+Ctrl+X

Select the Style attribute to edit it, and look for the a piece of code that looks like this.

stroke-dasharray:19.5,19.5;

The numbers shown may be different for you depending on what dash you selected. But the default is two numbers separated by a comma.

You can edit these numbers, and after you've done it, hit the check mark button in the XML

In the example below, I set it to a dash of 10, followed by a gap of 5, then a dash of 15, then a gap of 5. You can have more numbers if you want a more complex pattern. Here's what it looks like after I edited it.

stroke-dasharray:10,5,15,5;

enter image description here

After doing this you will almost certainly have one dash/gap that is longer than it should be, as you can see in the above example. You can fix this by very slightly adjusting the stroke width until it looks right.

enter image description here

Edit Further to the comments

A more accurate method might be to create a pattern using a grid, 360mm long (1mm per degree). Then you could accurately measure the gaps and lines. These lines are actually made of filled rectangles. Snapping will enable you to draw the rectangles so the fit the grid exactly.

Then combine these as one path (using Path > Combine)

Copy it, then apply as a pattern along a path to a circle using the Link Path to Clipboard button, and the Single Stretched option in the Path Effects dialog

Example:

Note: the first and last rectangles are 10mm, both together making a 20mm rectangle when joined together in the final path effect.

enter image description here

4
  • Thanks for the answer. But I don't think this approach is accurate enough. I cannot achieve the same distance between the lines this way + attributes are recalculated after I copy them. I need a more precise way: I want to tell the program that there should be N degrees between the dashes relative to the circle (20 degrees is a small dash, 40 degrees is a long dash and a 30 degree gap between them). And how can I set the number of dashes?
    – RareScrap
    Aug 1 '20 at 9:43
  • 1
    @RareScrap I've added an edit for another method that allows for accuracy.
    – Billy Kerr
    Aug 1 '20 at 14:05
  • Your new approach suits me much better. But when I try to rotate the drawing, it turns into a spiral. How do I just rotate it?
    – RareScrap
    Aug 3 '20 at 11:42
  • @RareScrap Not sure what you mean. When I rotate this it just rotates as it should. See example.
    – Billy Kerr
    Aug 3 '20 at 11:57
3

One possibility is to use path effect "pattern along a path". You need the repeating pattern as horizontal to lay it along a circle which is converted at first to path. The pattern must be a path or a combined path, groups do not work.

Here's an older case of the subject: Inkscape: Bend a vector along a circular arc

There's no need to get under the hood of Inkscape, but pattern along path can still be quite complex. A little easier is to cut the needed pieces off from a circle. Your pattern seems to repeat in 90 degrees wide pieces, so only a 90 degrees sector is needed. It can be copied and rotated.

enter image description here

You can rotate lines to get clipping markers if needed.

In the left a circular curve is drawn with the ellipse tool. In the info bar there's set sector range 0 to 90 degrees.

The red line is drawn to store the center. Drawing it is possible if you have all snaps to point on. This needs snap to center.

In the right the arc is converted to path (=Path > Object to Path) and new nodes are inserted with the node tool to mark the clipping points.

In the next image in the left the path is cut with the node tool, Path > Break apart is applied and the unwanted parts are deleted:

enter image description here

In the right the remnants of the arc are grouped. Their rotation center is moved to the top end of the red line. The group is duplicated and Object > Transform > rotate > 90 degrees is applied. Duplicating and rotating is repeated twice.

The pieces can be ungrouped and combined to one combined path (=Path > Combine). Then the whole thing can handled easily as one object. A group is dangerous, its parts can still be accidentally selected and moved apart.

enter image description here

The red line can be deleted, but it can still be useful because it shows the centerpoint.

The 3rd idea is simply to insert an inverted clipping path on the circle:

enter image description here

In the left there's a circle and a rectangle on it. In the right both are selected and Object > Clip > Set inverse is applied. The color is not important here, it is meaningful for setting a mask for transparency, but not for setting a clipping path.

If you make rotated copies of your rectangle and combine them with Path > Union you can get the wanted shape very easily. In the next image the rectangles are united and the union is used as an inverted clipping path:

enter image description here

If I watch very carefully the stroke cutting angles in your original example I must say that the 3rd method is the right one.

2
  • This approach suits me best, but the trouble is that Android Studio cannot import a svg created in this way. It only imports the circle without gaps.
    – RareScrap
    Aug 3 '20 at 11:45
  • You can convert the stroke of the circle to path and subtract the united rotated rectangles from it. The result isn't any more a stroked curve, but a combined filled area with no stroke. Visually it's the same as in my example.
    – user287001
    Aug 3 '20 at 11:50

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.