svg 缩写含义

最新推荐文章于 2024-11-19 20:09:27 发布

静静的躺平

最新推荐文章于 2024-11-19 20:09:27 发布

阅读量1.3k

点赞数 2

分类专栏： svg 文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_39578505/article/details/123428668

版权

svg 专栏收录该内容

3 篇文章

订阅专栏

SVG中的<path>元素用于创建复杂形状，通过'd'属性定义路径数据。本文详细解释了M、L、l、H、V、h、v、Z、S、C、Q、T、A等指令的含义和用法，展示了如何绘制直线、曲线和闭合路径。例如，d=M10 10 H90 V90 H10 L10 10表示从(10,10)开始，水平移动到90，垂直移动到90，再回到(10,10)，最后闭合路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

### svg 缩写的含义

```
 M 代表 MoveTo 移动到 两个参数 x,y  x代表x 坐标 y代表y 坐标
 L 代表 LineTo 划线到 两个参数x,y  x代表x坐标 y 代表y坐标
 l 代表 LineTo 划线到 两个参数x,y  x代表相对坐标 y代表相对坐标 与上个点的相对坐标
 H 代表 HorizonTo 代表水平位置 一个参数 代表水平位置
 V 代表 VerticalTo 代表垂直方向 一个参数 代表垂直位置
 h 代表  HorizonTo吧相对水平位置移动
 v 代表  VerticalTo 垂直方向 一个参数 代表水平垂直移动
 Z 代表 闭合close Path 代表闭合线
 S 代表 曲线 也可以画曲线链接起来  如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点
 C 代表 三次Bezier  贝塞尔 曲线  C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)  两个控制点 x1,y1  x2,y2  终点x,y
 Q 代表 二次Bezier 贝塞尔曲线 Q x1 y1, x y (or q dx1 dy1, dx dy)
 T 代表链接 二次贝塞尔曲线
 A 代表 arc 代表弧度 A rx ry x-axis-rotation large-arc-flag sweep-flag x y   rx代表x坐标半径 ry 代表y坐标半径 x-axis-rotation 代表旋转角度 large-arc-flag 1代表大角度弧  0代表小角度弧  sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧 
 <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
 这个含义就算 移动到x坐标10，y坐标10,开始划线到水平位置的90，划线到垂直方向90,回到水平位置10,连线到10,10 位置


```