‘svg文件’SVG文件格式…

<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=";version="1.1"><pathd="M150 0 L75 200 L225 200 Z"/></svg>

对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。

实例 2

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

下面是SVG代码：

实例

<svgxmlns=";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>