vue 船 航行视图盘用svg展示

Vue可以使用SVG（Scalable Vector Graphics）展示船航行视图盘。SVG是一种基于XML的格式，它可以定义矢量图形和文本，并且支持交互式和动画效果。以下是一个简单的船航行视图盘的SVG示例：

<template>
  <div class="ship-view">
    <svg width="300" height="300">
      <circle cx="150" cy="150" r="130" stroke="#ccc" stroke-width="2" fill="#fff"/>
      <circle cx="150" cy="150" r="50" stroke="#ccc" stroke-width="2" fill="#fff"/>
      <circle cx="150" cy="150" r="10" stroke="#000" stroke-width="2" fill="#fff"/>
      <line x1="150" y1="150" x2="150" y2="20" stroke="#000" stroke-width="2"/>
      <line x1="150" y1="150" x2="235" y2="150" stroke="#000" stroke-width="2"/>
      <polyline points="150,150 200,120 200,180" stroke="#000" stroke-width="2" fill="none"/>
      <text x="250" y="150" font-size="20" fill="#000">N</text>
      <text x="150" y="25" font-size="20" fill="#000">S</text>
      <text x="130" y="140" font-size="20" fill="#000">W</text>
      <text x="170" y="160" font-size="20" fill="#000">E</text>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'ShipView'
}
</script>

<style scoped>
.ship-view {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

在这个示例中，我们创建了一个SVG元素，并设置了它的宽度和高度。然后，我们使用`circle`元素创建了两个圆形，表示船的外部和内部视图盘。接下来，我们使用`line`元素创建了一个指向北方的线条，并使用`polyline`元素创建了一个指向航向的指示器。最后，我们使用`text`元素添加了四个方向的标签。通过调整这些元素的属性，我们可以自定义船航行视图盘的样式和功能。

当组件被渲染时，它将显示一个船航行视图盘，如下图所示：