← 返回 SVG 模块

SVG 路径绘制

path 元素是 SVG 中最强大的绘图工具，可以绘制任意复杂的形状。

📖 路径命令参考

M x y

移动到 (Move to)

L x y

直线到 (Line to)

H x

水平线到

V y

垂直线到

C x1 y1 x2 y2 x y

三次贝塞尔曲线

S x2 y2 x y

平滑三次贝塞尔

Q x1 y1 x y

二次贝塞尔曲线

T x y

平滑二次贝塞尔

A rx ry rotation large-arc sweep x y

椭圆弧

Z

闭合路径

💡 提示：大写字母表示绝对坐标，小写字母表示相对坐标

直线路径 (M, L, H, V)

              // 使用 L (Line to) <path d="M 50,50 L 150,50 L 150,150 L 50,150 Z"/> // 使用 H (Horizontal) 和 V
                (Vertical) <path d="M 200,50 H 300 V 150 H 200 Z"/>
            

二次贝塞尔曲线 (Q, T)

              // Q: 二次贝塞尔曲线 (起点, 控制点, 终点) <path d="M 50,150 Q 150,50 250,150"/> // T:
                平滑延续曲线 <path d="M 50,150 Q 150,50 250,150 T 450,150"/>
            

三次贝塞尔曲线 (C, S)

              // C: 三次贝塞尔曲线 (起点, 控制点1, 控制点2, 终点) <path d="M 50,100 C 100,50 200,50
                250,100"/>
            

椭圆弧 (A)

              // A: 椭圆弧 (rx ry rotation large-arc-flag sweep-flag x y) <path d="M 50,100 A 50,50 0 0,0
                150,100"/> // 小弧，逆时针 <path d="M 50,100 A 50,50 0 0,1 150,100"/> // 小弧，顺时针 <path
                d="M 50,100 A 50,50 0 1,0 150,100"/> // 大弧，逆时针 <path d="M 50,100 A 50,50 0 1,1 150,100"/>
                // 大弧，顺时针
            

🎮 交互式路径编辑器

拖动控制点来调整曲线形状

<path d="M 50,150 C 150,50 350,50 450,150"/>