svg 中的 <path> 元素介绍

最新推荐文章于 2024-03-30 03:37:52 发布

最新推荐文章于 2024-03-30 03:37:52 发布 · 517 阅读

本文详细介绍了SVG中的路径<path>元素及其属性，包括如何使用d属性定义路径数据、pathLength属性的作用以及各种路径指令如M、L、H、V、A等的用法。此外还介绍了绝对坐标和相对坐标的概念。

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

svg 路径 <path> 元素

path 的属性，2 个

d="path data" 路径上点的坐标
pathLength="<number>" 路径总长度

example:
<path d="M 100 100 L 300 200 L 200 300 z"
style="fill:none;stroke;blue;stroke-width:5" />

M 表示移动到当前点 M 100 100 指将当前点移动到坐标(100, 100) 的地方
L 表示绘制直线 "L 300 200" 指从当前位置(100, 100) 绘制直线到 (300, 200) 处
z 表示闭合路径，首尾相连。

语法：
1. 坐标指令和数据间的空格可以省略，如 "M 100 100 L 300 200 L 200 300 z" 等价于
"M100 100L300 200L200 300z"

2. 同一指令出现多次可以只使用一个 "M 100 100 L 300 200 L 200 300 z" 等价于
"M 100 100 L 300 200 200 300 z"

3. 命令名大写字母表示后面是绝对坐标，小写字母表示后面是相对坐标。

4. 绘制水平或垂直线段时，可以使用 H 和 V 命令代替 L 。

椭圆圆弧曲线 A 或 a

语法是 "A rx ry x-axis-rotation large-arc-flag sweep-flag x y" 共 7 个参数

rx ，ry 是椭圆弧的半长轴，半短轴长度
x-axis-rotation 是此段弧所在的椭圆的 x 轴与水平方向的夹角，即 x 轴的旋转角度
large-arc-flag 和 sweep-flag 决定了椭圆弧的绘制方向，值是 0 或 1
x,y 是椭圆弧终端坐标
椭圆圆心是计算出来的，不需要指定
large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线
sweep-flag , 1 代表从起点到终点弧线绕椭圆中心顺时针方向，0 代表逆时针方向