svg path 路径规则

2023-05-28  本文已影响0人  很好就这样吧

命令      名称                                       参数
 M        moveto             移动到                  (x y)
 Z        closepath          关闭路径                (none)
 L        lineto             画线到                  (x y)
 H        horizontal lineto  水平线到                 x
 V        vertical lineto    垂直线到                 y
 A        elliptical         arc椭圆弧               (rx ry x-axis-rotation large-arc-flag sweep-flag x y)
 C        curveto            三次贝塞尔曲线到          (x1 y1 x2 y2 x y)
 S        smooth curveto     光滑三次贝塞尔曲线到       (x2 y2 x y)
 Q        Bézier curveto     二次贝塞尔曲线到          (x1 y1 x y)
 T        smooth Bézier curveto光滑二次贝塞尔曲线到     (x y)
A(elliptical Arc)弧形

rx ry 分别是是椭圆的x轴半径和y轴半径。
x-axis-rotation 是椭圆相对于坐标系的旋转角度。
large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。
sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。
x y 是圆弧终点的坐标。
例: M 120 45 A 60 45 0 0 0 80 125, 效果如下图


M 120 45 A 60 45 0 0 0 80 125

PS:如果指令字母是大写的,例如M, 则表示坐标位置是绝对位置;如果指令字母小写的,例如m, 则表示坐标位置是相对位置。

<path d="M150 0 L75 200 L225 200 Z" fill="red" stroke="blue" stroke-width="10"/>
上一篇 下一篇

猜你喜欢

热点阅读