Menu
Link: Official SVG Reference
Hello men and women, I am having some trouble with shorthand (defined by S or s in pathdata) bezier curves defined as SVG paths. Specifically, how to calculate the first control point.
Say we have one curveto command with control points (X1, Y1) and (X2, Y2), endpoint (X3, Y3) and starting point (X0, Y0).
Next comes a shorthand/smooth curve command with a first control point (X4, Y4) and second control point (X5, Y5). Assume everything is in absolute coordinates for simplicity.
How would one calculate the unknown first control point (X4, Y4) from the other known points?
342
To find any point P along a line, use the formula: P = (1-t)P0 + (t)P1 , where t is the percentage along the line the point lies and P0 is the start point and P1 is the end point.
An SVG quadratic curve will probably suffice. To draw it, you need the end points (which you have) and a control point which will determine the curve. To make a symmetrical curve, the control point needs to be on the perpendicular bisector of the line between the end points. A little maths will find it.
Line commands The most generic is the "Line To" command, called with L . L takes two parameters—x and y coordinates—and draws a line from the current position to a new position. There are two abbreviated forms for drawing horizontal and vertical lines. H draws a horizontal line, and V draws a vertical line.
Your first point is the last point of the previous curve. In this case it would be (x3, y3). Then your second point in the short hand is the terminating point for the length of the curve the shorthand represents.
If we are to translate your paths into both full length versions we would have:
M X0, Y0 C X1, Y1 X2, Y2 X3, Y3
M X3, Y3 C XR, YR X4, Y4 X5, Y5
Where XR, YR is the reflection of the last control point of the previous curve about the first point of the current curve.
XR, YR is just the reflection of P2 about P3 so:
XR = 2*X3 - X2 and
YR = 2*Y3 - Y2
you can treat the last control point from the last curve and the end point of the last curve( which is the first point in the new curve) as a line, and the mirrored control point should lie on that line at a distance equal to the distance from the last control point to the last end point
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
