JS-library/svg-learn/2.html at master · fengfanv/JS-library · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="200" height="400" viewBox="-100 -200 200 400">
        <polygon points="0,0 80,120 -80,120" fill="#234236" />
        <polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
        <polygon points="0,-80 40,0 -40,0" fill="#38755B" />
        <rect x="-20" y="120" width="40" height="30" fill="brown" />
    </svg>
    <p>Tree
        We can’t always use basic shapes to assemble our image. A polygon is the simplest way to draw a freeform shape.
        Here we set a list of coordinates that are connected with straight lines.</p>
    <p>
        树
        我们不能总是使用基本形状来组装我们的图像。多边形是绘制自由形状的最简单方法。在这里，我们设置了一个用直线连接的坐标列表。
    </p>
</body>

</html>