1# 绘制路径 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyujie43--> 5<!--Designer: @weixin_52725220--> 6<!--Tester: @xiong0104--> 7<!--Adviser: @HelloCrease--> 8 9[Svg](../reference/apis-arkui/arkui-js/js-components-svg.md)组件绘制路径时，通过Path中的M（起点）、H（水平线）、a（绘制弧形到指定位置）路径控制指令，并填充颜色实现饼状图效果。 10 11```html 12<!-- xxx.hml --> 13<div class="container"> 14 <svg fill="#00FF00" x="100" y="400"> 15 <path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="red" stroke="blue" stroke-width="5" > 16 </path> 17 <path d="M275,175 v-150 a150 150 0 0 0 -150 150 z" fill="yellow" stroke="blue" stroke-width="5"> 18 </path> 19 </svg> 20</div> 21``` 22 23```css 24/* xxx.css */ 25.container { 26 flex-direction: row; 27 justify-content: flex-start; 28 align-items: flex-start; 29 height: 1200px; 30 width: 600px; 31 background-color: #F1F3F5; 32} 33``` 34 35 36 37 38 39> **说明：** 40> - M/m = moveto 参数x和y表示需要移动到点的x轴和y轴的坐标。在使用M命令移动画笔后，只会移动画笔，但不会在两点之间画线。所以M命令经常出现在路径的开始处，用来指明从何处开始画。 41> 42> - L/l = lineto 参数x和y表示一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。 43> 44> - H/h = horizontal lineto 绘制平行线。 45> 46> - V/v = vertical lineto 绘制垂直线。 47> 48> - C/c = curveto 三次贝塞尔曲线 设置三组坐标参数： x1 y1, x2 y2, x y。 49> 50> - S/s = smooth curveto 三次贝塞尔曲线命令 设置两组坐标参数： x2 y2, x y。 51> 52> - Q/q = quadratic Belzier curve 二次贝塞尔曲线 设置两组坐标参数： x1 y1, x y。 53> 54> - T/t = smooth quadratic Belzier curveto 二次贝塞尔曲线命令 设置参数： x y。 55> 56> - A/a = elliptical Arc 弧形命令 设置参数： rx ry x-axis-rotation（旋转角度）large-arc-flag（角度大小） sweep-flag（弧线方向） x y。large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。 57> 58> - Z/z = closepath 从当前点画一条直线到路径的起点。 59
