vue绘制地铁线路图(SVG)

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

完整代码：

<template>
  <div class="box">
    <svg width="1700" height="700">
      <!-- 绘制地铁线路 -->
      <path
        d="M100,200 L150,190 L200,180 L250,170 L300,160 L350,150
        L400,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>