vue绘制地铁线路图(SVG)

线路图(SVG)"/>

vue绘制地铁线路图(SVG)

SVG：SVG是一种基于XML的矢量图形格式，可以使用SVG元素绘制各种形状和路径，包括线、圆、多边形等。可以使用JavaScript库如D3.js来绘制SVG地图。对于地铁路线图或小车地图等简单地图，可以使用SVG元素绘制线、圆等形状表示路线和站点，也可以使用文本元素添加标签和文字说明。

完整代码：

<template><div class="box"><svg width="1700" height="700"><!-- 绘制地铁线路 --><pathd="M100,200 L150,190 L200,180 L250,170 L300,160 L350,150L400,150 L450,150 L500,150 L550,150 L600,150 L650,150 L700,150 L750,150 L750,200"stroke="#009900"stroke-width="2"fill="none"/><!-- 绘制站点 --><circle cx="100" cy="200" r="8" fill="white" stroke="#009900" stroke-width="2" /><circle cx="150" cy="190" r="8" fill="white" stroke="#009900" stroke-width="2" /><circle cx="200" cy="180" r="8" fill="white" stroke="#009900" stroke-width="2" /><circle cx="250" cy="170" r="8" fill="white" stroke="#009900" stroke-width="2" /><circle cx="300" cy="160" r="8" fill="white" stroke="#009900" stroke-width="2" /><circle cx="350" cy="150" r="8" fill="white" stroke="#009900" stroke-width="2" /><text x="110" y="220" fill="#009900">万盛</text><text x="160" y="210" fill="#009900">杨柳河</text><text x="210" y="200" fill="#009900">凤溪河</text><text x="260" y="190" fill="#009900">南熏大道</text><text x="310" y="170" fill="#009900">光华公园</text><text x="340" y="120" fill="#009900">涌泉</text><circle cx="400" cy="150" r="8" fill="white" stroke="#009900" stroke-width="2" /><circle cx="450" cy="150" r="8" fill="white" stroke="#009900" stroke-width="2" /><circle cx="500" cy="150" r="8" fill="white" stroke="#009900" stroke-width="2" /><circle cx="550" cy="150" r="8" fill="white" stroke="#009900" stroke-width="2" /><circle cx="600" cy="150" r="8" fill="white" stroke="#009900" stroke-width="2" /><circle cx="650" cy="150" r="8" fill="white" stroke="#009900" stroke-width="2" /><circle cx="700" cy="150" r="8" fill="white" stroke="#009900" stroke-width="2" /><circle cx="750" cy="150" r="8" fill="white" stroke="#009900" stroke-width="2" /><text x="380" y="190" fill="#009900">凤凰大街</text><text x="420" y="120" fill="#009900">马厂坝</text><text x="470" y="190" fill="#009900">非遗博览园</text><text x="530" y="120" fill="#009900">蔡桥</text><text x="580" y="190" fill="#009900">中坝</text><text x="620" y="120" fill="#009900">成都西站</text><text x="670" y="190" fill="#009900">清江西路</text><text x="720" y="120" fill="#009900">文化宫</text><path d="M750,200 L750,250 L750,300 L750,350" stroke="#3baeca" stroke-width="2" fill="none" /><circle cx="750" cy="200" r="8" fill="white" stroke="#3baeca" stroke-width="2" /><circle cx="750" cy="250" r="8" fill="white" stroke="#3baeca" stroke-width="2" /><circle cx="750" cy="300" r="8" fill="white" stroke="#3baeca" stroke-width="2" /><circle cx="750" cy="350" r="8" fill="white" stroke="#3baeca" stroke-width="2" /><text x="770" y="220" fill="#3baeca">东坡路</text><text x="770" y="260" fill="#3baeca">龙爪堰</text><text x="770" y="310" fill="#3baeca">武侯大道</text><text x="770" y="350" fill="#3baeca">太平园</text><!-- <path d="M160,100 L160,200 L160,300 L160,400" stroke="#000" stroke-width="5" fill="none" /><circle cx="160" cy="100" r="5" fill="white" stroke="blue" stroke-width="2" /><circle cx="160" cy="200" r="5" fill="white" stroke="blue" stroke-width="2" /><circle cx="160" cy="300" r="5" fill="white" stroke="blue" stroke-width="2" /><circle cx="160" cy="400" r="5" fill="white" stroke="blue" stroke-width="2" /><text x="180" y="120" fill="black">站点A</text><text x="180" y="220" fill="black">站点B</text><text x="180" y="320" fill="black">站点C</text><text x="180" y="420" fill="black">站点D</text>--></svg></div>
</template><script>
export default {name: "CarpiaoPage",data () {return {}},methods: {},
}
</script><style scoped>
</style>