更新于 

svg学习

24个示例 Hunor Márton Borbély

在html5之后，html中可以直接书写svg，
无需再将svg标签单独拉出。

svg和html不能混用标签

svg标签属性
  • width/height 外部尺寸
  • viewBox( sx, sy, w, h) 内部尺寸
    • 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>

姜饼人