SVG

SVG 简介 SVG 实例 SVG 在 HTML 中 SVG 矩形 SVG 圆形 SVG 椭圆 SVG 直线 SVG 多边形 SVG 曲线 SVG 路径 SVG 文本 SVG Stroke 属性 SVG 滤镜 SVG 模糊效果 SVG 阴影 SVG 渐变 - 线性 SVG 渐变- 放射性 SVG 参考手册

SVG 路径

SVG<path>

SVG 路径 - <path>

<path> 元素用于定义一个路径。

下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

实例 1

上面的例子定义了一条路径，它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。

下面是SVG代码：

实例

实例 2

使用贝兹曲线流畅的曲线模型，可无限期的缩放。一般情况下，用户选择两个端点和一个或两个控制点。一个一个控制点的贝塞尔曲线被称为二次贝塞尔曲线和两个控制点的那种被称为立方体。

下面的例子创建了一个二次贝塞尔曲线，A和C分别是起点和终点，B是控制点：

下面是SVG代码：

实例

复杂吗？是的！！由于在绘制路径时的复杂性，强烈建议使用SVG编辑器来创建复杂的图形。