前端SVG笔记与简单应用实例

一. 初识SVG

SVG能够绘制一些CSS难以做到的复杂图像和动画。而且放大不失真。

二. 基础语法

（1）SVG代码全都放在顶层标签< svg > …< / svg >之中。

（2）SVG也有宽高属性，< svg width=“100%” height=“50” > ，如果不指定宽与高，则默认大小 宽300px，高150px 。

（3）如果只展示SVG图像的一部分。则要指定 viewBox 属性。

1

2

3

viewBox属性的值有四个数字,分别是左上角的横坐标和纵坐标，视口的高度和宽度。上面代码中: SVG图像是100像素宽100像素高. viewBox属性指定视口从(50，50)这个点开始。所以,实际看到的是右下角的四分之一圆。注意，视口必须适配所在的空间。上面代码中， 视口的大小是5050 ,由于VG图像的时大小100100，所以视口会放大去适配SVG图像的大小.即放大了四倍。

（4）< circle > 标签代表圆形。

1

2

3

cx、cy、 r属性分别为横坐标，纵坐标和半径。< svg >画布的左上角是原点。也可以给标签设置class类名然后赋予css属性。

不过SVG的CSS属性与网页元素有些不同。

.yuan{ fill:填充色 stroke :描边色 stroke-width :边框宽度 }

1

2

3

4

5

（5）< line >标签，代表直线。

1

2

3

x1 属性和y1属性,表示线段起点的横坐标和纵坐标; x2属性和y2属性,表示线段终点的横坐标和纵坐标; style属性表示线段的样式。

（6）< polyline >标签，代表折线。

1

2

3

points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔，点与点之间空格。

（7）< rect >标签代表矩形。

1

2

3

x属性和y属性, 指定了矩形左上角端点的横坐标和纵坐标; width属性和height属性指定了矩形的宽度和高度。

（8）< ellipse > 标签代表椭圆。

1

2

3

选择语言

cx属性和cy属性,指定了椭圆中心的横坐标和纵坐标(单位像索) ; rx属性和ry属性表示横向轴和纵向轴的半径(单位像素)。

（9）< polygon > 标签代表多边形。

1

2

3

points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。

（10）< path >标签代表路径。

1

2

3

4

5

6

7

8

9

10

11

d属性表示绘制顺序,它的值是一个长字符串 ,每个字母表示一个绘制动作 ,后面是坐标。大小写都得。

M:起始点(moveto) L:画直线到( lineto ) Z:闭合路径

1

2

3

更多…

（11）< text >标签，用来绘制文本。

1

2

3

4

href属性指定所要复制的节点的id，x属性和y属性是左上角的坐标。另外,还可以指定width和height坐标。

（13）< g >标签，把多个形状放一组，用use直接复制一组。

1

2

3

4

5

6

7

8

（14）< defs >标签，里面代码不运行显示，除非用被引用。

1

2

3

4

5

6

7

8

9

10

（15）< pattern >标签，自定义一个形状,该形状可以被引用来平铺一个区域。

1

2

3

4

5

6

7

上面代码中，< pattern>标签将一个圆形定 义为fuzhi。patternUnits="userSpaceOnUse"表示 < pattern>< pattern>的宽度和长度是实际的像索值。然后，指定这个模式去填充下面的矩形。

（16）< image >标签，引用一张图片。

1

2

3

上面代码中 xlink:href属性表示图像的来源。

（17）< animate >标签，动画效果，可写多个。

1

2

3

4

5

6

7

上面代码中,圆形会不断移动,产生动画效果。

attributeName :发生动画效果的属性名。

from :单次动画的初始值。

to :单次动画的结束值。

dur :单次动画的持续时间。

repeatCount :动画的循环模式。

（18）< animate > 标签对CSS的transform属性不起作用, 如果需要变形,就要使用< animateTransform >标签。

详细

1

2

3

上面代码中, 效果为旋转( rotate ) , 这时from和to属性值有三个数字,第1个数字是角度值，第二个值和第三个值是旋转中心的坐标。from=*0 50 50表示开始时，角度为0 ，开始旋转角度为100。

（19）< linearGradient > 定义线性渐变，用于图形元素的填充或描边。

详细

（20）< stop >定义一种颜色及其在渐变上使用的位置。此元素始终是< linearGradient >or< radialGradient >元素的子元素。

用法

1

2

3

4

属性：

（20）preserveAspectRatio。有时候, 通常我们使用 viewBox 属性时, 希望图形拉伸占据整个视口。 在其他情况下，为了保持图形的长宽比，必须使用统一的缩放比例.

点击看MDN文档详细用法。

1

2

3

三.JS操作SVG

跟普通标签一样使用便可。

四：简单应用实例

效果：

实现：

定义svg标签，这个可以自行下载想要的图：

1

2

3

4

定义 svg 标签的基本样式：

svg{ border: 1px solid rgba(233, 233, 233, 0.9); box-shadow: inset 0 0 15px rgba(233, 233, 233, 0.9); cursor: pointer; transition: all 1.5s; }

1

2

3

4

5

6

border: 边框

box-shadow: 阴影

cursor: 鼠标样式

transition：过渡

定义花（path标签）的基本样式：

.hua{ fill: transparent; stroke: white; stroke-width: 5px; stroke-dasharray: 1235; stroke-dashoffset: 1235; fill: transparent; transition: all 1.5s; }

1

2

3

4

5

6

7

8

9

10

fill: transparent; 颜色透明

stroke: white; 边框白色

stroke-width: 5px; 边框宽5px

stroke-dasharray: 1235; 用于创建虚线

stroke-dashoffset: 1235; 偏移

详细用法看这，这个博主写得很直观。

当虚线跟图的边框一样长，再把它向左偏移同样大小，便相当于消失了。

鼠标经过svg时，取消偏移，线又慢慢回来，便有绘画描边的效果了：

svg:hover{ box-shadow: inset 0 0 15px rgba(233, 233, 233, 1), inset 0 0 20px rgba(233, 233, 233, 1); } svg:hover .hua{ stroke-dashoffset: 0; fill: red; }

1

2

3

4

5

6

7

8

完整代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

总结：

要运用 SVG 实现复杂的特效还是很困难的，任重道远啊。

SVG web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。