SVG自由路径：path
本篇涵盖复杂形状元素：<path>，该元素提供强大的自由曲线能力，可以用它创建线条，曲线，弧形等等。
核心元素
<path> — 自由曲线与复杂形状
- 用途：任意形状、复杂图形、图标、徽标、装饰线条。
- 常用属性：
d：路径命令字符串（支持直线/曲线/弧线/闭合等）
- 直线命令：
M x y/m dx dy：移动到指定坐标，只移动画笔不画线L x y/l dx dy：直线到移动到指定坐标H x/h dx：水平线V y/v dy: 垂直线Z：闭合路径，不区分大小写
- 曲线命令：
Q x1 y1, x y/q dx1 dy1, dx dy：二次贝塞尔，一个控制点+一个终点T x y/t dx dy：平滑二次，T 会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。需要注意的是，T 命令前面必须是一个 Q 命令，或者是另一个 T 命令，才能达到这种效果。C x1 y1, x2 y2, x y/c dx1 dy1, dx2 dy2, dx, dy：三次贝塞尔，两个控制点+一个终点S x2 y2, x y/s dx2 dy2, dx dy：平滑三次，S 命令可以用来创建与前面一样的贝塞尔曲线，但是，如果 S 命令跟在一个 C 或 S 命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果 S 命令单独使用，前面没有 C 或 S 命令，那当前点将作为第一个控制点。A rx ry rot largeArc sweep x y/a rx ry rot largeArc sweep dx dy：椭圆弧
示例
- 基础用法:
1 | <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> |
- 成品展示：
相对坐标与自动闭合：
1
2
3<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
</svg>成品展示：
- 三次贝塞尔曲线：
1 | <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> |
- 成品展示：
平滑三次贝塞尔曲线：
1
2
3<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>成品展示：
- 二次贝塞尔曲线：
1 | <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> |
- 成品展示：
平滑二次贝塞尔曲线：
1
2
3<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>成品展示：
弧形：
1
2
3
4
5
6
7
8<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>成品展示：
- 弧形带标注：
1 | <svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"> |
- 成品展示：
- 弧形参数对比：
1 | <svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"> |
- 成品展示：
小贴士
- 命令绝对/相对：大写为绝对坐标，小写为相对坐标，相对上一个点的坐标；相对命令更利于拼接与复用。
- 平滑命令：
T/S会自动推导控制点，打造连续曲线；遇拐角可改用显式控制点以免意外弯折。 - 描边与缩放：几何缩放时用
vector-effect: non-scaling-stroke保持描边恒定；需要视觉统一时再移除此属性。 - 填充规则：自交或嵌套路径时尝试
fill-rule: evenodd以实现洞/镂空效果。 - 维护性：复杂
d建议拆分为多个<path>或用工具（如设计软件/脚本）生成；务必保留注释或控制点标识。