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?
Best Answer
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:
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: