2px

预览


            

SVG 路径命令入门指南

                1. **基本命令**:
                ```
                M = 移动到 (Move to)
                L = 画线到 (Line to)
                H = 水平线到 (Horizontal line to)
                V = 垂直线到 (Vertical line to)
                Z = 闭合路径 (Close path)
                ```

                2. **坐标系统**:
                ```
                - 原点(0,0)在左上角
                - x轴向右为正
                - y轴向下为正
                - 单位可以是px或其他
                ```

                3. **路径命令格式**:
                ```
                大写字母 = 绝对坐标
                小写字母 = 相对坐标

                例如:
                M10 10   移动到坐标(10,10)
                m10 10   相对当前位置移动(10,10)
                L20 20   画线到坐标(20,20)
                l10 10   相对当前位置画线(10,10)
                ```
            


                4. **曲线命令**:
                ```
                C = 三次贝塞尔曲线 (Cubic Bezier)
                S = 平滑三次贝塞尔曲线
                Q = 二次贝塞尔曲线 (Quadratic Bezier)
                T = 平滑二次贝塞尔曲线
                A = 弧线 (Arc)


                5. **示例**
                ```
                # 直线
                M10 10 L50 50

                # 矩形
                M10 10 h50 v50 h-50 Z


                # 曲线
                M10 10 Q30 50 50 10

                    #
                    M4 6 h16 M4 12 h16 M4 18 h7

                ```