编写引入svg

SVG是一种XML语言，类似XHTML，可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。

SVG文件的基本属性最值得注意的一点是元素的渲染顺序。SVG文件全局有效的规则是“后来居上”，越后面的元素越可见。

如何引入svg

使用 <embed> 标签<embed> 标签被所有主流的浏览器支持，并允许使用脚本。

  <embed src="rect.svg" width="300" height="100"

type="image/svg+xml"

pluginspage="http://www.adobe.com/svg/viewer/install/" />

使用 <object> 标签 <object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。

  <object data="rect.svg" width="300" height="100"

type="image/svg+xml"

codebase="http://www.adobe.com/svg/viewer/install/" />

使用 <iframe> 标签 <iframe> 标签可工作在大部分的浏览器中。

  <iframe src="rect.svg" width="300" height="100"></iframe>

基本形状

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>

  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>

  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"

      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"

      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>

</svg>

矩形 rect

x 矩形左上角的x位置
y 矩形左上角的y位置
width 矩形的宽度
height 矩形的高度
rx 圆角的x方位的半径
ry 圆角的y方位的半径

圆形 circle

r 圆的半径
cx 圆心的x位置
cy 圆心的y位置

椭圆 ellipse

rx 椭圆的x半径
ry 椭圆的y半径
cx 椭圆中心的x位置
cy 椭圆中心的y位置

线条 line

x1 起点的x位置
y1 起点的y位置
x2 终点的x位置
y2 终点的y位置

多边形 polygon

points 点集数列

（每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。）

路径 path (强大)

d 一个点基数列

path元素的形状是通过属性d定义的，属性d的值是一个“命令+参数”的序列

每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的x和y轴坐标。比如移动到(10,10)这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对定位（例如：从上一个点开始，向上移动10px，向左移动7px）

直线命令
- “Move to”命令M x y或m dx dy（移动画笔）
- “Line to”命令L x y (or l dx dy) 需要两个参数，分别是一个点的x轴和y轴坐标
- H x (or h dx) V y (or v dy) H，绘制水平线。V，绘制垂直线。这两个命令都只带一个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动
闭合命令
- Z (or z)
曲线命令

我们从稍微复杂一点的三次贝塞尔曲线C入手，三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数：

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

这里的最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。如果你熟悉代数或者微积分的话，会更容易理解控制点，控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程。

弧形

基本上，弧形可以视为圆形或椭圆形的一部分。假设，已知椭圆形的长轴半径和短轴半径，并且已知两个点（在椭圆上），根据半径和两点，可以画出两个椭圆，在每个椭圆上根据两点都可以画出两种弧形。所以，仅仅根据半径和两点，可以画出四种弧形。为了保证创建的弧形唯一，A命令需要用到比较多的参数：
```
 A rx ry x-axis-rotation large-arc-flag sweep-flag x y

 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
```

文字 text

<text x="10" y="10">Hello World!</text>

设置文字属性

文本的一个至关重要的部分是它显示的字体。SVG提供了一些属性，类似于它们的CSS同行，用来激活文本选区。下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明：font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。

巴特西

编写引入svg

如何引入svg

基本形状

矩形 rect

圆形 circle

椭圆 ellipse

线条 line

多边形 polygon

路径 path (强大)

直线命令

闭合命令

曲线命令

弧形

文字 text

设置文字属性

最新文章

热门文章