html绘制地铁路线图
时间: 2023-08-27 11:05:14 浏览: 84
HTML 本身并不支持绘制图形,但可以使用 SVG 或 Canvas 元素来绘制地铁路线图。以下是一个使用 SVG 元素绘制的地铁路线图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>地铁路线图</title>
<style>
#map {
width: 800px;
height: 600px;
border: 1px solid #ccc;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="map">
<svg width="100%" height="100%">
<!-- line 1 -->
<path d="M 100 150 L 200 150 L 300 100 L 400 100 L 500 50 L 600 50 L 700 50" stroke="#f44336" stroke-width="10" fill="none" />
<!-- line 2 -->
<path d="M 100 450 L 200 450 L 300 400 L 400 400 L 500 350 L 600 350 L 700 350" stroke="#2196f3" stroke-width="10" fill="none" />
<!-- line 3 -->
<path d="M 150 200 L 250 200 L 350 250 L 450 250 L 550 300 L 650 300" stroke="#4caf50" stroke-width="10" fill="none" />
<!-- line 4 -->
<path d="M 150 400 L 250 400 L 350 350 L 450 350 L 550 300 L 650 300" stroke="#ff9800" stroke-width="10" fill="none" />
<!-- stations -->
<circle cx="100" cy="150" r="10" fill="#f44336" />
<circle cx="200" cy="150" r="10" fill="#f44336" />
<circle cx="300" cy="100" r="10" fill="#f44336" />
<circle cx="400" cy="100" r="10" fill="#f44336" />
<circle cx="500" cy="50" r="10" fill="#f44336" />
<circle cx="600" cy="50" r="10" fill="#f44336" />
<circle cx="700" cy="50" r="10" fill="#f44336" />
<circle cx="100" cy="450" r="10" fill="#2196f3" />
<circle cx="200" cy="450" r="10" fill="#2196f3" />
<circle cx="300" cy="400" r="10" fill="#2196f3" />
<circle cx="400" cy="400" r="10" fill="#2196f3" />
<circle cx="500" cy="350" r="10" fill="#2196f3" />
<circle cx="600" cy="350" r="10" fill="#2196f3" />
<circle cx="700" cy="350" r="10" fill="#2196f3" />
<circle cx="150" cy="200" r="10" fill="#4caf50" />
<circle cx="250" cy="200" r="10" fill="#4caf50" />
<circle cx="350" cy="250" r="10" fill="#4caf50" />
<circle cx="450" cy="250" r="10" fill="#4caf50" />
<circle cx="550" cy="300" r="10" fill="#4caf50" />
<circle cx="650" cy="300" r="10" fill="#4caf50" />
<circle cx="150" cy="400" r="10" fill="#ff9800" />
<circle cx="250" cy="400" r="10" fill="#ff9800" />
<circle cx="350" cy="350" r="10" fill="#ff9800" />
<circle cx="450" cy="350" r="10" fill="#ff9800" />
<circle cx="550" cy="300" r="10" fill="#ff9800" />
<circle cx="650" cy="300" r="10" fill="#ff9800" />
</svg>
</div>
</body>
</html>
```
在上面的代码中,使用 SVG 元素绘制了四条地铁线路,以及每条线路上的站点。每条线路使用 `path` 元素来绘制,`d` 属性表示路径,`stroke` 属性表示线条颜色,`stroke-width` 属性表示线条宽度,`fill` 属性表示填充颜色。
每个站点使用 `circle` 元素来绘制,`cx` 和 `cy` 属性表示圆心坐标,`r` 属性表示半径,`fill` 属性表示填充颜色。
这只是一个基本的示例,你可以根据自己的需要进行修改和扩展。