vue中使用svg画路径图的详细介绍

下面我将详细介绍使用Vue制作SVG路径图的步骤。

第一步：准备SVG的代码

首先，我们需要有一个SVG的代码，SVG代码可以通过绘图软件制作或在网上查找生成，这里举个例子，我们假设我们需要绘制一个五角星，对应的SVG代码如下：

<svg width="30" height="30" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
  <path fill="currentColor" stroke="currentColor" d="M7 0L8.29 4.5H13L9.71 7.65L11 12.15L7 9.75L3 12.15L4.29 7.65L1 4.5H5.71L7 0Z" />
</svg>

第二步：将SVG代码放入Vue组件中

在Vue组件中，我们可以使用template标签将SVG代码直接插入，例如：

<template>
  <div>
    <svg width="30" height="30" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
      <path fill="currentColor" stroke="currentColor" d="M7 0L8.29 4.5H13L9.71 7.65L11 12.15L7 9.75L3 12.15L4.29 7.65L1 4.5H5.71L7 0Z" />
    </svg>
  </div>
</template>

第三步：使用 Props 动态传参

如果我们希望路径图可以通过外部参数动态修改，可以使用Vue的Props来传递参数。例如，我们可以定义一个名为d的Props，用于接收路径数据，然后在path标签中使用该Props：

<template>
  <div>
    <svg width="30" height="30" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
      <path :d="path" fill="currentColor" stroke="currentColor" />
    </svg>
  </div>
</template>

<script>
export default {
  name: "SVGPath",
  props: {
    path: {
      type: String,
      required: true
    }
  }
}
</script>

我们可以在父组件中像下面这样传递参数：

<template>
  <div>
    <svg-path path="M7 0L8.29 4.5H13L9.71 7.65L11 12.15L7 9.75L3 12.15L4.29 7.65L1 4.5H5.71L7 0Z" />
  </div>
</template>

<script>
import SVGPath from './SVGPath.vue'

export default {
  name: "App",
  components: {
    SVGPath
  }
}
</script>

示例说明

下面我给出两个使用示例：

示例1：使用 <path> 标签绘制矩形

<template>
  <div>
    <svg-width-rect :width="200" :height="100" />
  </div>
</template>

<script>
import SVGWidthRect from './SVGWidthRect.vue'

export default {
  name: "App",
  components: {
    SVGWidthRect
  }
}
</script>

<template>
  <div>
    <svg width="100%" height="100%">
      <rect width="100%" height="100%" fill="green" />
      <path :d="path" fill="red" />
    </svg>
  </div>
</template>

<script>
export default {
  name: "SVGWidthRect",
  props: {
    width: {
      type: Number,
      required: true
    },
    height: {
      type: Number,
      required: true
    }
  },
  computed: {
    path() {
      return `M0 0H${this.width}V${this.height}H0Z`
    }
  }
}
</script>

示例2：使用 <path> 标签绘制世界地图

<template>
  <div>
    <world-map :width="800" :height="400" />
  </div>
</template>

<script>
import WorldMap from './WorldMap.vue'

export default {
  name: "App",
  components: {
    WorldMap
  }
}
</script>

<template>
  <div>
    <svg width="100%" height="100%">
      <path v-for="path in paths" :d="path.d" :fill="path.fillColor" />
    </svg>
  </div>
</template>

<script>
export default {
  name: "WorldMap",
  props: {
    width: {
      type: Number,
      required: true
    },
    height: {
      type: Number,
      required: true
    }
  },
  computed: {
    paths() {
      return [
        { d: '......', fillColor: '#FF0000' },
        { d: '......', fillColor: '#00FF00' },
        { d: '......', fillColor: '#0000FF' },
        // ... more paths
      ]
    }
  }
}
</script>

以上就是制作SVG路径图的整体步骤，你可以根据自己的需求进行修改。