Change T command to Q command in SVG

Question

I have this SVG file which produces number 3. This SVG file uses Command T (smooth quadratic Bezier curveto), but I like to change to command Q (quadratic Bezier curveto) which needs a control point. According to the document (http://tutorials.jenkov.com/svg/path-element.html The control point is assumed to be the same as the last control point used. Which I think is NOT true. I played with few examples they do produce correct answer, but those examples consist of all point on the same line excluding control points) . In this example 383.05,399.92,Q383.05,402.63,381.85,403.27,T375.48,403.9. The points (383.05,399.92),(381.85,403.27)and(375.48,403.9) are not on the same line. Can someone point me how to resolve this problem? Any help will be very much appreciated. For some reason I am unable to insert svg file

Answer 1

If you want to know how the T path command works, then the correct place to look is the SVG specification. The definition for T begins as follows:

Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point.

"The control point is assumed to be the same as the last control point used"

That is only true if the previous path command doesn't have a control point.

In your case, the previous command does have a control point.

Q 383.05, 402.63, 381.85, 403.27
T 375.48, 403.9

The control point for the T, is the control point of the previous Q command (383.05, 402.63) reflected past the "current" point (381.85, 403.27).

To calculate that, you add the difference between the control point and the current point, to the current point.

cpX = currentX + (currentX - ctrlX)
    = 381.85 + (381.85 - 383.05) = 380.65
cpY = currentY + (currentY - ctrlY)
    = 403.27 + (403.27 - 402.63) = 403.91

So the equivalent path would be:

Q 383.05, 402.63, 381.85, 403.27
Q 380.65, 403.91, 375.48, 403.9

Demo

path {
  fill: none;
  stroke: red;
}

path:nth-child(2) {
  stroke: black;
  stroke-width: 0.25;
}

<svg viewBox="375 401 8 5">
  <path d="M 380,402
           Q 383.05, 402.63, 381.85, 403.27
           T 375.48, 403.9"/>
  <path d="M 380,402
           Q 383.05, 402.63, 381.85, 403.27
           Q 380.65, 403.91, 375.48, 403.9"/>
</svg>