svg path 路径规则


命令      名称                                       参数
 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"/>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容