SVG 路径编辑器
编辑和转换 SVG 路径数据。缩放、旋转、平移和翻转路径,实时预览。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path
d="M 10 10L 90 10L 90 90L 10 90Z"
stroke="#00ffff"
stroke-width="2"
fill="none"
/>
</svg>M x y- Move to
L x y- Line to
H x- Horizontal line
V y- Vertical line
C x1 y1 x2 y2 x y- Cubic Bezier
S x2 y2 x y- Smooth Cubic
Q x1 y1 x y- Quadratic Bezier
T x y- Smooth Quad
A rx ry rot large sweep x y- Arc
Z- Close path
SVG Path Commands - 技术详情
SVG paths use a mini-language for drawing: M (moveto), L (lineto), H/V (horizontal/vertical line), C (cubic bezier), Q (quadratic bezier), A (arc), Z (close). Uppercase = absolute, lowercase = relative coordinates.
命令行替代方案
<!-- Basic path commands --> <path d="M10 10 L90 10 L90 90 L10 90 Z" /> <!-- Arc command --> <path d="M50 10 A40 40 0 1 1 50 90" />