1# Path Drawing 2 3 4The **<svg>** component uses instructions **M** (start point), **H** (horizontal line), and **a** (drawing an arc to a specified position) to control a path and sets the fill colors to create a pie chart. 5 6```html 7<!-- xxx.hml --> 8<div class="container"> 9 <svg fill="#00FF00" x="100" y="400"> 10 <path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="red" stroke="blue" stroke-width="5" > 11 </path> 12 <path d="M275,175 v-150 a150 150 0 0 0 -150 150 z" fill="yellow" stroke="blue" stroke-width="5"> 13 </path> 14 </svg> 15</div> 16``` 17 18```css 19/* xxx.css */ 20.container { 21 flex-direction: row; 22 justify-content: flex-start; 23 align-items: flex-start; 24 height: 1200px; 25 width: 600px; 26 background-color: #F1F3F5; 27} 28``` 29 30 31 32 33 34> **NOTE** 35> - M/m = moveto The **x** and **y** parameters indicate the destination X and Y coordinates of a point. The **M** command only moves the brush, but does not draw a line between two points. Therefore, the **M** command is often used at the beginning of a path to indicate the start point. 36> 37> - L/l = lineto The **x** and **y** parameters indicate the X and Y coordinates of a point. The **L** command draws a line between the current position and the destination position (the previous point of the brush). 38> 39> - H/h = horizontal lineto Draws a horizontal line. 40> 41> - V/v = vertical lineto Draws a vertical line. 42> 43> - C/c = curveto Draws a cubic Bezier curve. Three groups of coordinate parameters are required: **x1 y1**, **x2 y2**, **x y**. 44> 45> - S/s = smooth curveto Draws a cubic Bezier curve. Two groups of coordinate parameters are required: **x2 y2**, **x y**. 46> 47> - Q/q = quadratic Belzier curve Draws a quadratic Bezier curve. Two groups of coordinate parameters are required: **x1 y1**, **x y**. 48> 49> - T/t = smooth quadratic Belzier curveto Draws a quadratic Bezier curve. One group of coordinate parameters are required: **x y**. 50> 51> - A/a = elliptical Arc Draw an arc. The following parameters are required: **rx ry x-axis-rotation** (rotation angle), **large-arc-flag** (angle), **sweep-flag** (arc direction), and **x y**. **large-arc-flag** determines whether the arc is less than 180 degrees. **0** indicates yes, and **1** indicates no. **sweep-flag** indicates the direction in which an arc is drawn. **0** indicates that the arc is drawn counterclockwise from the start point to the end point. **1** indicates that the arc is drawn clockwise from the start point to the end point. 52> 53> - Z/z = closepath Draws a straight line from the current point to the start point of the path. 54
