SVG Path (arcs)

[m_hutley]

So…i’m trying to wrap my head around an arc. Humor ensues.

I’m trying to understand how the pathing works for an arc. Here’s what my path looks like:
M0,1020 v-60 a10 10 0 0 1 10 -10 h1280 a10,10 0 0 1 10,10 v60 z

And this is the desired effect, but I’m not grasping the different variables in the arc to understand what precisely it is i’ve done (by poking around different numbers until ‘it looks right’), or how to go about doing it right.

Perhaps someone can explain to me in third grader terms how to think about this.

M0,1020
start at 0,1020.
v-60
Draw a vertical line 60 pixels “up”. So now my ‘cursor’ is sitting at 0,960.
a10 10 0 0 1 10 -10
Right. So here’s where it goes off the rails.
the 10 10 at the start I understand as a 10-pixel-radius circle (though I dare not test my understanding by doing anything other than circular at the moment)
rotation probably doesn’t do anything when it comes to a circular arc. (a circle rotated about its centroid is the same circle)
large-arc I vaguely understand - whether the line goes the short way around or the long way around.
sweep I don’t get, especially combined with large-arc.
and then we have the target offset, or collision point, which begs a couple of questions -
1: What happens if the collision point isn’t on the radius of the arc? If I tell it to draw my arc on a 10 pixel radius, and then tell it to keep going until it reaches 11,11… it can never get there.
2: How does it determine which of the two possible arcs with a given radius of 10 px and defined coordinates “0,0” and “10,-10” to use?

[alexwalker]

Wish I could help in this. I’ve been working with SVG for 7-8 years and still ¯\__(ツ)_/¯ and just head back to Figma when I need to change an arc.

Having said that, putting a shot of the path you have might help.

[m_hutley]

The path is a simple ‘tab’ - a rectangle with its top corners rounded on a 10px arc.

[alexwalker]

Ok, I think this might help. It certainly makes more sense in my head now.

Wave Maker

[m_hutley]

can’t really say it does. It adds more complexity to the questions, and doesnt actually answer either?

[RyanReese]

Not sure how much this’ll help you understand SVG paths but this popped up in my email and thought of you immediately .

SVG Path Visualizer

[m_hutley]

I… think i’m understanding. The wording helps, but i’m still uncertain on the behavior of a couple of corner cases.

So an Arc is defined by the following:

• A Start Point (This is the point on the canvas the ‘pen’ is at when you reach the instruction, so it’s implicit, rather than explicit)
• An End Point (Explicitly defined)
• 2 possible Ellipses, which are defined by:
  • The X and Y radii of the ellipses (in a circle, these are the same value)
  • The Start Point, and End point, which lie on the ellipses
  • The rotation of the elipses with respect to its centroid.
• 2 boolean flags, that determine which of the 4 possible arcs to draw.

For any given 2 points, (x1,y1),(x2,y2), such that those two points do not represent the vertices of either axis, there exists two ellipses that pass through those points with the correct radii. These two ellipses have opposing traversal paths through the points (which is to say, their centroids lie on opposite sides of a straight line between the two points).
The ellipses, bisected by the start and end points, constitute 4 arcs: 2 arcs of less than 180 degrees, and 2 of more than 180 degrees.
From (x1,y1) then, there are 4 paths of travel:
Ellipse 1, on the smaller arc;
Ellipse 2, on the smaller arc;
Ellipse 1, on the larger arc;
and Ellipse 2, on the larger arc.
The choice of path is thus able to be reduced to two boolean flags:
1: To take the smaller or bigger arc,
2: Which ellipse to follow. (This boolean is indeterminate, and must be replaced by other logic.)

The first of these booleans is rather simplistic in it’s understanding: Whichever ellipse you traverse, you take the shorter (0), or longer (1), route around.
The second is a bit more elusive; as we have not defined which ellipse is which. We have, by nature of the first boolean, removed two of the possible arcs. By geometric definition, the two remaining arcs can be defined by the motion from the start point required to traverse it: A ‘positive’ (1) one (such that the sweep of the arc procedes ‘clockwise’ around the ellipse, with respect to its centroid), or a ‘negative’ (0) one (likewise, except counter-clockwise).

This does lead to some fringe cases, however, that i’m still not quite getting.

1: The specification of the arc says that if the points lie outside the possible bounds of the ellipse, the radii are automatically adjusted to be the minimal values, while maintaining ratio and rotation, that puts the start and end points on the ellipse, but these conditions do not seem to be maintained if the radii are too large - What then becomes the stop trigger for the arc drawing, if the end point lies inside the shape?

2: If the start and end points DO represent the axis of the ellipse, the evaluation of the booleans becomes more troublesome. In that case, both ellipses occupy the same coordinates (there is only one ellipse such that the points lie on the minor or major axis), so two paths lead to the same arc, but the problem exists in the boolean of whether to follow the larger or smaller arc - both arcs would have the same measure… so how does one determine which arc to draw?

[coothead]

Hi there m_hutley,

here is a basic example…

  <svg  
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 300 200">
  <path 
   d="M 20 10 H 290 Q 300 10 300 20 V 180 H 10 V 20 Q 10 10 20 10" 
   fill="#ccc" 
   stroke="#000"
   stroke-width="1"/>
   <!--  
       Q 300 10 300 20   is the right hand radius 
       Q  10 10  20 10   is the left hand radius 
   -->
 </svg>

Of course if you had wanted four corners instead of two,
there would not have been any problems…

 <svg  
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 300 200">
  <rect y="10" x="10" width="290" height="170" rx="10" 
   fill="#ccc" 
   stroke="#000"
   stroke-width="1"/>
 </svg>

coothead

[m_hutley]

I came back to thinking about this and snapped one of the questions that lingered in my mind.

@m_hutley

1: The specification of the arc says that if the points lie outside the possible bounds of the ellipse, the radii are automatically adjusted to be the minimal values, while maintaining ratio and rotation, that puts the start and end points on the ellipse, but these conditions do not seem to be maintained if the radii are too large - What then becomes the stop trigger for the arc drawing, if the end point lies inside the shape?

What I was tricking myself with was thinking that the centerpoint of the circles (ellipses) was fixed. The endpoints cannot lie inside the shape, because the shape is defined by the endpoints. You can always draw a ellipse such that two points exist on that ellipse, given that the two points are not at a greater cartesian distance than the larger of the two axial diameters, and that the centre point of the ellipse is not fixed.

Therefore, the specification needing to deal with the case of the endpoints being too far apart makes sense, while not needing to deal with things that are too small (because they can’t be.)