SVG 路径
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代码：
实例
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><pathd="M150 0 L75 200 L225 200 Z"/></svg>
尝试一下 »
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
实例 2
下面的例子创建了一个二次方贝塞尔曲线，A 和 C 分别是起点和终点，B 是控制点：
下面是SVG代码：
实例
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><pathid="lineAB"d="M 100 350 l 150 -300"stroke="red"stroke-width="3"fill="none"/><pathid="lineBC"d="M 250 50 l 150 300"stroke="red"stroke-width="3"fill="none"/><pathd="M 175 200 l 150 0"stroke="green"stroke-width="3"fill="none"/><pathd="M 100 350 q 150 -300 300 0"stroke="blue"stroke-width="5"fill="none"/><!-- Mark relevant points --><gstroke="black"stroke-width="3"fill="black"><circleid="pointA"cx="100"cy="350"r="3"/><circleid="pointB"cx="250"cy="50"r="3"/><circleid="pointC"cx="400"cy="350"r="3"/></g><!-- Label the points --><gfont-size="30"font="sans-serif"fill="black"stroke="none"text-anchor="middle"><textx="100"y="350"dx="-30">A</text><textx="250"y="50"dy="-10">B</text><textx="400"y="350"dx="30">C</text></g></svg>
尝试一下 »
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
复杂吗？是的！！由于在绘制路径时的复杂性，强烈建议使用SVG编辑器来创建复杂的图形。