vue svg

<template>
  <div>
    <!-- 使用内联 SVG -->
    <svg width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" stroke="black" stroke-width="2" fill="red" />
    </svg>

    <!-- 使用外部 SVG 文件 -->
    <img src="@/assets/icon.svg" alt="icon" />

    <!-- 动态绑定 SVG 属性 -->
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" :r="radius" stroke="black" stroke-width="2" :fill="color" />
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 100,
      radius: 10,
      color: 'blue'
    };
  }
};
</script>

<style scoped>
/* 添加一些样式 */
svg {
  margin: 10px;
}
</style>

解释说明：

1. 内联 SVG：

   • 直接在模板中编写 SVG 标签，可以方便地进行样式和属性的修改。
   • 示例中的 <circle> 元素绘制了一个红色的圆。

2. 外部 SVG 文件：

   • 使用 <img> 标签引入外部的 SVG 文件，适合复用已有的 SVG 图标。
   • src 属性指向项目的静态资源文件夹中的 icon.svg 文件。

3. 动态绑定 SVG 属性：

   • 使用 Vue 的双向绑定语法 :（即 v-bind），可以动态地设置 SVG 元素的属性。
   • 在示例中，size、radius 和 color 是通过 data 函数定义的响应式数据，并且可以在运行时动态更改。

4. 样式：

   • 使用 <style scoped> 可以为当前组件中的 SVG 元素添加特定的样式，确保样式不会影响其他组件。