HTML5 SVG Arc
The below instructions are in Capital letter as well as small letters. The Capital letters are for certain place while the lower letters are for qualified position.
- M/m - moveto – To move from one point to another point. We may need to code the moveto at the beginning of the initial data section. There can be several moveto to begin a new subpath. Factors – (x y)+
- L/l - lineto – Get a line using (x,y) organize. Factors – (x y)+
- H/h - Horizontal lineto – Draw a straight-line using x organize. Factors – x+
- V/v - Vertical lineto – Draw a perpendicular line using y organize. Factors – y+
- C/c - curveto – To get three-dimensional Bézier curve. Factors – (x1 y1 x2 y2 x y)+
- S/s - shorthand/smooth curveto – To get easy cubic Bézier curve. Factors – (x2 y2 x y)+
- Q/q - quadratic Bézier curveto. Factors – (x1 y1 x y)+
- T/t - shorthand/smooth quadratic Bézier curveto - Factors – (x y)+
- A/a - elliptical arc – To get an oval curl using x-axis, y-axis, rx, ry,cycle, huge-arc-flag, and clean-flag. Factors – (rx ry x-axis-turning heavy-arc-flag clean-flag x y)+
- Z/z - closepath – To close together the SVG path. Factors – None
Example -
Scenario - Below example describes about how to draw an arc.
<!DOCTYPE html>
<html>
<body>
<svg height="120" width="300">
<path d="M240 100 A40 40 40 10 90 100 0" stroke="yellow"
stroke-width="10" fill="none"/>
</svg>
</body>
</html>