vue 航行视图使用svg展示

Vue 航行视图可以使用 SVG 展示，SVG 是一种基于 XML 的标记语言，它可以用来描述矢量图形，包括直线、曲线、矩形、圆形、多边形等等。使用 Vue 和 SVG 可以轻松地创建交互式的可视化图形，例如地图、图表、流程图等等。

以下是一个使用 Vue 和 SVG 创建航行视图的简单示例：

<template>
  <svg width="400" height="400">
    <circle cx="200" cy="200" r="150" fill="#f0f0f0" stroke="#333" stroke-width="2" />
    <line x1="200" y1="50" x2="200" y2="350" stroke="#333" stroke-width="2" />
    <line x1="50" y1="200" x2="350" y2="200" stroke="#333" stroke-width="2" />
    <circle v-for="(point, index) in points" :key="index" :cx="point.x" :cy="point.y" r="5" fill="#333" />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      points: [
        { x: 100, y: 100 },
        { x: 300, y: 100 },
        { x: 300, y: 300 },
        { x: 100, y: 300 },
      ],
    };
  },
};
</script>

在上面的示例中，我们使用 SVG 创建一个圆形和两条直线作为航行视图的底图，然后通过 Vue 的数据驱动渲染，动态地添加了一些圆形作为船只的当前位置。这个示例非常简单，但可以作为一个基础模板，根据实际需求进行扩展和定制。