By fei you

更新日期:

文章目录
  1. 1. 2D图形绘制
    1. 1.1. 基本图形
  2. 2. SVG文本与图像
  3. 3. 笔画与填充

可缩放矢量图形(Scalable Vector Graphics，简称SVG)是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法)。

SVG允许三种类型的图形对象：

- 矢量图形形状（例如由直线和曲线组成的路径）、
- 图像
- 文本。

可以将图形对象（包括文本）分组、样式化、转换和组合到以前呈现的对象中。 SVG 功能集包括嵌套转换、剪切路径、alpha 蒙板和模板对象。 　　SVG绘图是交互式和动态的。 例如，可使用脚本来定义和触发动画。这一点与Flash相比很强大。Flash是二进制文件，动态创建和修改都比较困难。而SVG是文本文件，动态操作是相当容易的。而且，SVG直接提供了完成动画的相关元素，操作起来非常方便。 　　 SVG VS Canvas SVG与其他Web标准兼容，并直接支持文档对象模型DOM。这一点也是与HTML5中的canvas相比很强大的地方。 这里注意， SVG内部也是用一个类似的canvas这样的东西来展示SVG图形， 到后面你会发现很多特性和HTML5的canvas还有点像；文中如果没明确说明是SVG的canvas的话，都代指HTML5中的canvas元素。因而，可以很方便的使用脚本实现SVG的很多高级应用。而且SVG的图形元素基本上都支持DOM中的标准事件。可将大量事件处理程序(如“onmouseover”和“onclick”)分配给任何SVG图形对象。 虽然SVG的渲染速度比不上canvas元素，但是胜在DOM操作很灵活，这个优势完全可以弥补速度上的劣势。

特点 • SVG文件是纯粹的XML， 可被非常多的工具读取和修改(比如记事本)。 • SVG 与JPEG 和GIF图像比起来，尺寸更小，且可压缩性更强。 • SVG 是可伸缩的，可在图像质量不下降的情况下被放大，可在任何的分辨率下被高质量地打印。 • SVG 图像中的文本是可选的，同时也是可搜索的(很适合制作地图)。 • SVG 可以与 Java 技术一起运行。 • SVG 是开放的标准。

Browser IE9+, 可以在HTML 中直接运行

渲染顺序 从前到后

SVG是以XML定义的，所以是大小写敏感的，这点与HTML不一样.

2D图形绘制

http://www.cnblogs.com/dxy1982/archive/2012/04/06/2395729.html

基本图形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<svg width="200" height="250">
  <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坐标。

折线 - polyline元素 points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成："0 0, 1 1, 2 2"。

多边形 - polygon元素 points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成："0 0, 1 1, 2 2"

路径 - path元素 这个是最通用，最强力的元素了；使用这个元素你可以实现任何其他的图形，不仅包括上面这些基本形状，也可以实现像贝塞尔曲线那样的复杂形状；此外，使用path可以实现平滑的过渡线段，虽然也可以使用polyline来实现这种效果，但是需要提供的点很多，而且放大了效果也不好。这个元素控制位置和形状的只有一个参数 d：一系列绘制指令和绘制参数(点)组合成。 绘制指令分为绝对坐标指令和相对坐标指令两种，这两种指令使用的字母是一样的，就是大小写不一样，绝对指令使用大写字母，坐标也是绝对坐标；相对指令使用对应的小写字母，点的坐标表示的都是偏移量。

绝对坐标绘制指令

这组指令的参数代表的是绝对坐标。假设当前画笔所在的位置为(x0,y0)，则下面的绝对坐标指令代表的含义如下所示：

1
2
3
4
5
6
7
8
9
10
11

指令	参数	说明
M	x, y	将画笔移动到点(x,y)
L	x y	画笔从当前的点绘制线段到点(x,y)
H	x 	画笔从当前的点绘制水平线段到点(x,y0)
V	y 	画笔从当前的点绘制竖直线段到点(x0,y)
A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	画笔从当前的点绘制一段圆弧到点(x,y)
C	x1 y1, x2 y2, x y	画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)
S	x2 y2, x y	特殊版本的三次贝塞尔曲线(省略第一个控制点)
Q	x1 y1, x y 	绘制二次贝塞尔曲线到点(x,y)
T	x y	特殊版本的二次贝塞尔曲线(省略控制点)
Z	无参数	绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。

移动画笔指令M，画直线指令：L，H，V，闭合指令Z都比较简单 绘制圆弧指令：A rx ry x-axis-rotation large-arc-flag sweep-flag x y rx,ry 是弧的半长轴、半短轴长度 x-axis-rotation 是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数代表顺时针转动的角度。 large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线。 sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向。 x,y 是弧终端坐标。

1
2
3
4
5
6
7
8
9

<svg width="320px" height="320px">
  <path d="M 10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" 
		  stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

绘制三次贝塞尔曲线指令：C x1 y1, x2 y2, x y 三次贝塞尔曲线有两个控制点，就是(x1,y1)和(x2,y2)，最后面(x,y)代表曲线的终点。体会下面的例子：

1
2
3
4
5
6
7
8
9
10
11

<svg width="190px" height="160px">
  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
</svg>

特殊版本的三次贝塞尔曲线：S x2 y2, x y 很多时候，为了绘制平滑的曲线，需要多次连续绘制曲线。这个时候，为了平滑过渡，常常第二个曲线的控制点是第一个曲线控制点在曲线另外一边的映射点。这个时候可以使用这个简化版本。这里要注意的是，如果S指令前面没有其他的S指令或C指令，这个时候会认为两个控制点是一样的，退化成二次贝塞尔曲线的样子；如果S指令是用在另外一个S指令或者C指令后面，这个时候后面这个S指令的第一个控制点会默认设置为前面的这个曲线的第二个控制点的一个映射点，体会一下：

1
2
3

<svg width="190px" height="160px">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

绘制二次贝塞尔曲线指令：Q x1 y1, x y ， T x y (特殊版本的二次贝塞尔曲线) 如果是连续的绘制曲线，同样可以使用简化版本T。同样的，只有T前面是Q或者T指令的时候，后面的T指令的控制点会默认设置为前面的曲线的控制点的映射点，体会一下：

1
2
3

<svg width="190px" height="160px">
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

SVG path绘制注意事项

绘制带孔的图形时要注意：外层边的绘制需要是逆时针顺序的，里面的洞的边的顺序必须是顺时针的。只有这样绘制的图形填充效果才会正确。

SVG文本与图像

  • SVG不能执行自动换行
  • 换行和回车变成空格，而多个空格压缩成单个空格
1
2
3
4
5

<svg>  
  <rect width="300" height="200" fill="red" />  
  <circle cx="150" cy="100" r="80" fill="green" />  
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>  
</svg>

如上面的例子中所示，text元素可以设置下列的属性：

x,y是文本位置坐标。 text-anchor是文本显示的方向，其实也就是位置(x,y)处于文本的位置。这个属性有start,middle和end三种值。 start表示文本位置坐标(x,y)位于文本的开始处，文本从这点开始向右挨个显示。 middle表示(x,y)位于文本中间处，文本向左右两个方向显示，其实就是居中显示。 end表示(x,y)点位于文本结尾，文本向左挨个显示。 　　除了这些属性，下面的这些属性都既可以在CSS中指定，也可以直接在属性中指定:

fill,stroke：填充和描边颜色，具体使用在后面总结。 font的相关属性：font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration。

SVG中渲染图片 - image元素

1

SVG中的image元素可以直接支持显示光栅图片，使用很简单

这里需要注意几点： 1.如果没有设置x或y坐标，则默认是0。 2.如果没有设置width或height，则默认也是0. 3.如果显式的设置width或height为0，则会禁止渲染这幅图片。 4.图片的格式支持png,jpeg,jpg,svg等等，所以svg是支持嵌套svg的。 5.image与其他元素一样，是svg的常规元素，所以它支持所有的裁剪，蒙板，滤镜，旋转等效果。

笔画与填充

填充色 - fill属性

1
2

<rect x="10" y="10" width="100" height="100" stroke="blue" fill="red"
       fill-opacity="0.5" stroke-opacity="0.8"/>

上面例子中画了一个红色蓝边的矩形。注意几点：

  1. 如果不提供fill属性，则默认会使用黑色填充,如果要取消填充，需要设置成none。
  2. 可以设置填充的透明度，就是fill-opacity，值的范围是0到1。
  3. 稍微复杂一点的是fill-rule属性。这个属性定义了判断点是不是属于填充范围的算法；除了inherit这个值外，还有两个取值： nonzero：这个值采用的算法是：从需要判定的点向任意方向发射线，然后计算图形与线段交点的处的走向；计算结果从0开始，每有一个交点处的线段是从左到右的，就加1；每有一个交点处的线段是从右到左的，就减1；这样计算完所有交点后，如果这个计算的结果不等于0，则该点在图形内，需要填充；如果该值等于0，则在图形外，不需要填充。看下面的示例： evenodd：这个值采用的算法是：从需要判定的点向任意方向发射线，然后计算图形与线段交点的个数，个数为奇数则改点在图形内，需要填充；个数为偶数则点在图形外，不需要填充。看下图的示例：

边框色 - stroke属性

  1. 如果不提供stroke属性，则默认不绘制图形边框。
  2. 可以设置边的透明度，就是stroke-opacity，值的范围是0到1。
svg
svg
文章目录
  1. 1. 2D图形绘制
    1. 1.1. 基本图形
  2. 2. SVG文本与图像
  3. 3. 笔画与填充