![]()
24个示例 Hunor Márton Borbély
在html5之后，html中可以直接书写svg，
无需再将svg标签单独拉出。
svg和html不能混用标签
- width/height 外部尺寸
- viewBox( sx, sy, w, h) 内部尺寸
- 坐标系
- 左上角开始（0, 0）
- 右下角结束（100, 100）
宽50px，高50px，绘制（0,0）-（100,100）的图像
1
2
3
| <svg width='50' height='50' viewBox='0 0 100 100'>
<circle cx="50" cy="50" r="25" fill="#00ff00"></circle>
</svg>
|
宽100px，高100px，绘制（0,0）-（100,100）的图像
1
2
3
| <svg width='100' height='100' viewBox='0 0 100 100'>
<circle cx="50" cy="50" r="25" fill="#00ff00"></circle>
</svg>
|
宽100px，高100px，绘制（0,0）-（50,50）的图像
1
2
3
| <svg width='100' height='100' viewBox='0 0 50 50'>
<circle cx="50" cy="50" r="25" fill="#00ff00"></circle>
</svg>
|
宽100px，高100px，绘制（-50,-50）-（50,50）的图像
1
2
3
| <svg width='100' height='100' viewBox='-50 -50 100 100'>
<circle cx="50" cy="50" r="25" fill="#00ff00"></circle>
</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
| <svg
xmlns="http://www.w3.org/2000/svg"
width="200"
height="200"
viewBox="-100 -100 200 200"
>
<circle
cx="0"
cy="20"
r="70"
fill="#d1495b"
></circle>
<circle
cx="0"
cy="-75"
r="12"
stroke="#f79257"
stroke-width="5"
fill="none"
></circle>
<rect
x="-17.5"
y="-65"
width="35"
height="20"
fill="#f79257"
></rect>
</svg>
|
圣诞树
1
2
3
4
5
6
7
8
9
10
| <svg
width="200"
height="230"
viewBox="-100 -100 200 230"
>
<polygon points="0,-20 80,100 -80,100" fill="#234236"></polygon>
<polygon points="0,-60 60,40 -60,40" fill="#0C5C4C"></polygon>
<polygon points="0,-100 40,-20 -40,-20" fill="#38755b"></polygon>
<rect x="-20" y="100" width="40" height="30" fill="brown"></rect>
</svg>
|
姜饼人
