svg入门与svg实例(画兔子,小熊案例)

一、svg入门

css中的svg实际是对图像的形状描述,全称为可缩放矢量图,要想把svg玩的炉火纯青,首先就得对svg能画什么样的形状以及基础属性熟悉起来。

1.1svg形状

  • 矩形
  • 圆形
  • 椭圆
  • 线
  • 折线
  • 多边形
  • 路径

1.2svg属性

  • width:宽度
  • height:高度
  • x:左侧位置
  • y:顶部位置
  • cx:距离左侧位置
  • cy:距离顶部位置
  • rx:椭圆横向轴半径
  • ry:椭圆纵向轴半径
  • r:半径
  • x1,y1:横坐标与纵坐标
  • points:每个点的坐标
  • fill:填充色
  • strok:边框色
  • defs:自定义形状

更多属性参考文档:https://www.w3school.com.cn/svg/index.asp

二、实例

兔子实例:要画兔子首先我们得确定用到了哪些形状:椭圆耳朵,椭圆头,椭圆眼睛,折线鼻子,直线嘴巴。确定好需要的形状我就可以通过定好位置把这些形状全部组合在一起,形成我们想要的图案。

代码如下:

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
<svg version="1.1" width="800" height="800" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
svg {
background: #ddd;
}
.main {
fill: #fff;
}
.ears {
fill:pink;
}
.eyes {
fill: #333;
}
.nose {
stroke:pink;
fill: transparent;
stroke-width: 2;
}
</style>
<pattern id="flower" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">

<!-- ears -->
<ellipse cx="110" cy="45" rx="12" ry="32" class="main" transform="rotate(5 25 50)"/>
<ellipse cx="40" cy="55" rx="12" ry="32" class="main" transform="rotate(-30 45 50)"/>

<ellipse cx="110" cy="45" rx="10" ry="30" class="ears" transform="rotate(5 25 50)"/>
<ellipse cx="40" cy="55" rx="10" ry="30" class="ears" transform="rotate(-30 45 50)"/>

<!-- head -->
<ellipse cx="80" cy="115" rx="55" ry="45" class="main"/>

<!-- eyes -->
<ellipse cx="48" cy="110" rx="5" ry="9" class="eyes"/>
<ellipse cx="92" cy="110" rx="5" ry="9" class="eyes"/>

<!-- nose -->
<polyline points="60 138, 70 142, 80 138" class="nose"/>
<line x1="70" x2="70" y1="142" y2="150" class="nose"/>

</pattern>
</defs>
<rect id="bunny" fill="url(#flower)" width="200" height="200"/>
</svg>

效果图如下:(审美垃圾,大家肯定可以画的更好 ):

svg兔子

其实要画简单的动物图案svg基本上可以全部搞定,只要把形状组装好,你可以玩出很多花样的。

小熊实例:和画兔子一样,要画小熊首先我们得确定用到了哪些形状:椭圆耳朵,椭圆头,圆形眼睛,折线鼻子,直线嘴巴。确定好需要的形状我就可以通过定好位置把这些形状全部组合在一起,形成我们想要的图案。

代码如下:

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
<svg version="1.1" width="800" height="800" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
svg {
background: #ddd;
}
.main {
fill: #573f35;
}
.ears {
fill:#bf8b75;
}
.eyes {
fill: #000;
}
.eyeswhite{
fill: #fff;
}
.nose {
stroke:#bf8b75;
fill: transparent;
stroke-width: 2;
}
</style>
<pattern id="flower" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
<!-- ears -->
<ellipse cx="110" cy="70" rx="22" ry="16" class="main" transform="rotate(35 105 80)"/>
<ellipse cx="40" cy="75" rx="22" ry="14" class="main" transform="rotate(-30 45 50)"/>

<ellipse cx="110" cy="68" rx="10" ry="6" class="ears" transform="rotate(35 105 80)"/>
<ellipse cx="40" cy="75" rx="10" ry="6" class="ears" transform="rotate(-30 45 50)"/>

<!-- head -->
<ellipse cx="85" cy="115" rx="55" ry="45" class="main"/>

<!-- eyes -->
<ellipse cx="58" cy="110" rx="9" ry="9" class="eyes"/>
<ellipse cx="102" cy="110" rx="9" ry="9" class="eyes"/>

<ellipse cx="52" cy="107" rx="3" ry="3" class="eyeswhite"/>
<ellipse cx="97" cy="107" rx="3" ry="3" class="eyeswhite"/>

<!-- nose -->
<ellipse cx="80" cy="130" rx="10" ry="4" class="ears" />
<polyline points="70 143, 90 143" class="nose"/>

</pattern>
</defs>
<rect id="bunny" fill="url(#flower)" width="200" height="200"/>
</svg>

效果图如下:

svg小熊

总结:其实像我们日常用到的icon图标,还有上次写antv x6实现的树图像,都是应用了svg。可见svg的强大以及其拓展性。要想熟练起来大家可以自己多画画,比如自己画一只小狗出来。