July 10, 2015

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

DEMO: http://sources.ikeepstudying.com/svg/class/class4.php

SVG <polygon>

SVG 多边形 – <polygon>

实例 1

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

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

Remark 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图形预览源）。

`fill-rule` 属性

关于图形（或线条）的内部区域，是由 fill-rule 属性决定的，它有 nonzero 和 evenodd 两个值：

fill-rule="nonzero"
fill-rule="evenodd"

我并不打算假装我是完全了解这两种算法是如何工作的。下面是官方定义。还有来自规范文件的这两个算法分别的示例图像：

nonzero—这个规则通过从canvas上的某个点往任一方向绘制射线到无穷远，然后检查图形的线段和射线相交的点，来确定“内部区域”。从0开始计数，每次路径线段是从左到右穿过射线就加一，从右到左的就减一。通过计算交叉点，如果结果是0，则这个点在路径外边，不然，就是在里边。

evenodd—这个规则通过从canvas上某个点往任一方向绘制射线到无穷远，然后计算给定图形上线段路径和该射线交叉点的数量。如果这个数是奇数，那么该点在图形内部；如果是偶数，该点在图形外部。

让我觉得困惑的是这两组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动画入门

SVG动画入门（二）

SVG技术入门：线条动画实现原理

如何使用CSS来修改SVG原点和制作SVG动画

纯CSS实现帅气的SVG路径描边动画效果

SVG矢量绘图 path路径详解（基本画法）

SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）

Web流程图绘制使用raphael