如何在VueJS组件中初始化SVG.js并调用SVG('drawing').size(300, 300)

嘿，我来帮你搞定在Vue组件里初始化SVG.js并设置绘图尺寸的问题，亲测可行的步骤如下：

第一步：安装/引入SVG.js #

你有两种方式可以把SVG.js引入到Vue项目中：

• npm安装（推荐）：
  先在项目根目录执行命令安装依赖：

  npm install @svgdotjs/svg.js
  # 用yarn的话就执行这个
  yarn add @svgdotjs/svg.js
  

• CDN引入：
  如果你不想装依赖，直接在项目的public/index.html（Vue2）或者根目录的index.html（Vue3）里添加CDN脚本：

  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js"></script>
  

第二步：在Vue组件中初始化并调用尺寸设置 #

根据你使用的Vue版本，我分别给出示例：

Vue2 组件示例（Options API） #

<template>
  <!-- 先准备一个DOM容器，id要和后面SVG()调用的参数对应 -->
  <div id="drawing"></div>
</template>

<script>
// 如果你用npm安装的，需要先导入SVG对象
import { SVG } from '@svgdotjs/svg.js'

export default {
  name: 'SvgCanvas',
  mounted() {
    // 必须在组件挂载后初始化！此时DOM容器已经存在
    const draw = SVG('drawing').size(300, 300)
    // 可以加个测试图形验证是否生效
    draw.rect(100, 100).fill('#ff4444')
  },
  beforeDestroy() {
    // 组件销毁前清理SVG实例，避免内存泄漏
    const draw = SVG.get('drawing')
    if (draw) draw.remove()
  }
}
</script>

<style scoped>
#drawing {
  border: 1px solid #eee; /* 可选，方便看到容器范围 */
}
</style>

Vue3 组件示例（Composition API） #

<template>
  <div id="drawing"></div>
</template>

<script setup>
import { SVG } from '@svgdotjs/svg.js'
import { onMounted, onBeforeUnmount } from 'vue'

let drawInstance = null

onMounted(() => {
  // 挂载后初始化SVG实例并设置尺寸
  drawInstance = SVG('drawing').size(300, 300)
  // 画个圆测试效果
  drawInstance.circle(80).fill('#44ff44').move(110, 110)
})

onBeforeUnmount(() => {
  // 销毁前清理实例
  if (drawInstance) drawInstance.remove()
})
</script>

<style scoped>
#drawing {
  border: 1px solid #ddd;
}
</style>

关键注意事项 #

• 必须在DOM挂载后初始化：SVG.js需要操作真实DOM节点，所以一定要在mounted（Vue2）或onMounted（Vue3）钩子中调用SVG()，绝对不能在created里（此时容器还没渲染到页面）。
• 容器ID要严格对应：SVG('drawing')里的字符串必须和模板中div的id完全一致，否则会找不到容器导致初始化失败。
• 记得清理实例：组件销毁时调用remove()销毁SVG实例，避免残留DOM节点和事件监听造成内存泄漏。
• CDN引入无需import：如果用CDN方式引入，直接在组件里使用全局的SVG对象即可，不用写import语句。

常见问题排查 #

如果调用SVG('drawing').size()没效果，可以检查这几点：

• 打印document.getElementById('drawing')确认容器是否存在；
• 确认使用的是最新版的@svgdotjs/svg.js，旧版本API可能有差异；
• 检查容器是否被设置了display: none等隐藏样式，导致SVG无法渲染。

内容的提问来源于stack exchange，提问作者DevonDahon