Plotting Bezier curves SVG
In SVG there is a built-in function for constructing Bezier curves of the 2nd and 3rd degree, i.e. only on three and four points. You need to build on an arbitrary number of points.
It would be possible to build a curve of arbitrary degree, but this is not efficient, and it takes too long, I need to build almost instantly.
Therefore, I would like to combine several curves of the second degree into one large one.
How do I do this? Preferably with a ready-made code.
P.S. I'm writing vector drawing for academic purposes
2 answers
I will give the codes of examples first of a single Bezier curve of the second order, then with a second curve attached, and a third example of two curves with a guaranteed smooth connection.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="400" height="400" viewBox="0 0 400 400" >
<path d="M50,200 Q175,75 300,200"
style="stroke:blue; stroke-width:2; fill:none;"/>
</svg>- To connect two curves, the starting point of the second curve is attached to the end point of the first curve. In this case, the coordinates of the starting point of the second curve are not specified.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="800" height="800" viewBox="0 0 800 800" >
<path d="M50,200 Q175,75 300,200 Q425,75 550,200"
style="stroke:blue; stroke-width:4; fill:none;"/>
</svg>- For guaranteed smooth, no-frills results The command – (T) or (t) (for relative coordinates) is used to connect the two curves.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="800" height="800" viewBox="0 0 800 800" >
<path d="M50,200 Q175,75 300,200 T 550,200"
style="stroke:blue; stroke-width:4; fill:none;"/>
</svg>Then you can attach as many Bezier curves as you want. Code examples are taken here
Well, as far as I remember, in order for the pieces to fit together smoothly, two rules must be met:
The point where one piece ends must coincide with the point where the second piece begins (well, that's obvious).
This point must lie on a straight line between the previous and subsequent reference points.
That is, it turns out something like this:
(I apologize for the quality, I drew on in a hurry).
There is no ready-made code, but I think it will not be very difficult to write it here.