How to Draw Quadratic Bézier Curves on HTML5 SVGs

SVG quadratic Bezier curve: a tool to draw smooth edges

This article will explore how to draw smooth edges using quadratic Bezier curves in HTML5 SVG. The quadratic Bezier curve is defined by the d instruction in the SVG path Q attribute, with a start and end point, and the curve is bent through a single control point.

Key points:

The
• instruction in the d SVG path Q attribute is used to define a quadratic Bezier curve, which contains three coordinates: the start point, the control point and the end point.
• Use the lowercase letters q to specify relative coordinates, while the T and t instructions can be used to connect multiple curves. The system will automatically infer control points based on the previous curve to ensure smooth transitions of the curve.
• While encoding and visualizing quadratic Bezier curves can be challenging, the <path></path> code can be generated using the tool.
• Quadriferous Bezier curves can be used to create complex shapes and can be animated via <animate></animate> elements, CSS animations, or JavaScript.

Previous article "How to Create Complex Paths in SVG" explores the <path></path> elements and shows how to draw a series of line segments and arcs to create any shape (often used to copy fonts without downloading the full font). ). The d property provides some extra tricks to draw smooth curves. This article will discuss quadratic Bezier curves, and you can also refer to "How to draw cubic Bezier curves on SVG images" for more complex options.

What is a quadratic Bezier curve?

The quadratic Bezier curve has a starting point (P0) and an end point (P2). A single control point (P1) determines the curvature of the line. Wikipedia's Bezier Curve page provides a good generated illustration:

Pictures are from Wikipedia

Math enthusiasts can also view headache-inducing equations on Wolfram MathWorld.

Quadrilateral curves are great for drawing smooth edges. As can be seen from the figure below, it is easy to specify a control point, and usually right-angle edges appear:

Complex path

Quadratic Bezier curve uses the d instruction definition in the Q attribute of the SVG path:

<path d="M100,250 Q250,100 400,250" />

The

Initial M command moves the pen to the first point (100,250). Q is followed by two coordinates: a single control point (250,100) and the final drawn point (400,250).

You can also use the lowercase letter q to represent relative coordinates instead of absolute coordinates. The following curve will be the same and may be easier to encode:

<path d="M100,250 Q250,100 400,250" />

Finally, there are abbreviated T and t instructions (usually, lowercase letters represent relative coordinates rather than absolute coordinates). These instructions accept further end coordinates to connect multiple curves together. The control points are inferred from the last used point to ensure a perfect smooth continuous curve. For example, consider the following path:

<path d="M100,250 q150,-150 300,0" />

It draws a curve from 100,250 to 400,250 with the control point at 250,100. Another curve is then drawn, ending at 700,250, and the control point is inferred to 550,400.

The inferred control points are mathematically correct, but may not always be what you need!

Quadratic Bezier curves can be a bit difficult to encode and visualize, so you can use the Quick Generation Tool to generate <path></path> code for you:

CodePen link

Drag the control points at both ends of the curve. Click the curve itself to toggle the fill effect, which adds the end Z command.

Please note that this tool must convert DOM page coordinates to SVG coordinates to ensure it works properly for all screen sizes. This may be a little more complicated than you expected, so refer to "How to convert from DOM coordinates to SVG coordinates and return" for full details.

If you are ready to deal with more complex issues, try creating a cubic Bezier curve on an SVG image.

(The FAQ part mentioned in the original text should be added here, the content has been given in the original text and will not be repeated here)

The above is the detailed content of How to Draw Quadratic Bézier Curves on HTML5 SVGs. For more information, please follow other related articles on the PHP Chinese website!