SVG 教程 （四）多边形，曲线，路径

SVG <polygon>

---

 

SVG 多边形 - <polygon>

 

实例 1

<polygon> 标签用来创建含有不少于三个边的图形。

多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。

polygon来自希腊。 "Poly" 一位 "many" ， "gon" 意味 "angle".

下面是SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

 

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

 

代码解析：

• points 属性定义多边形每个角的 x 和 y 坐标

---

 

实例 2

下面的示例创建一个四边的多边形：

下面是SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="220,10 300,210 170,250 123,234"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

 

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

---

 

实例 3

使用 <polygon> 元素创建一个星型:

下面是SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

 

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

---

 

实例 4

改变 fill-rule 属性为 "evenodd":

下面是SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

 

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

 

SVG <polyline>

---

SVG 曲线 - <polyline>

实例 1

<polyline> 元素是用于创建任何只有直线的形状：

下面是SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

 

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

---

 

实例 2

只有直线的另一个例子：

下面是SVG代码：

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
  style="fill:white;stroke:red;stroke-width:4"/>
</svg>

 

F对于Opera用户：查看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代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

 

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

---

 

实例 2

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

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

下面是SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

 

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

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

 

本文： http://www.runoob.com/svg/svg-path.html

转自：SVG 教程 （四）多边形，曲线，路径