前端设计

svg path参数说明

2024-10-07

SVG path 参数是用来定义图形的指令集,这些指令可以包括直线、平滑曲线、圆弧、圆、矩形等。

下面是一些常用的参数:

M = moveto:将画笔移动到指定的坐标

L = lineto:画直线到指定的坐标

H = horizontal lineto:画水平线到指定的X坐标

V = vertical lineto:画垂直线到指定的Y坐标

C = curveto:三次贝塞尔曲线

S = smooth curveto:平滑三次贝塞尔曲线

Q = quadratic Belzier curve:二次贝塞尔曲线

T = smooth quadratic Belzier curveto:平滑二次贝塞尔曲线

A = elliptical Arc:圆弧

Z = closepath:关闭路径

例如,下面的 SVG path 定义了一个简单的正方形:

<path d="M10 10 H 90 V 90 H 10 Z" />

解释:

M10 10 是移动到点 (10,10)

H 90 是画一条水平线到 X 坐标 90

V 90 是画一条垂直线到 Y 坐标 90

H 10 是画一条水平线到 X 坐标 10

Z 是关闭路径,回到起点形成闭合图形

这个参数列表是非常全面的,可以创建各种复杂的图形。记住,所有的指令都是大小写敏感的。