vue如何使用snap.svg.js（snapsvg）库，Cannot read property ‘on’ of undefined

原创已于 2023-02-25 14:23:28 修改 · 2.1k 阅读

标签

#svg #vue #js #npm

收录于

于 2020-09-12 19:10:02 首次发布

技术开发经验笔记专栏收录该内容

28 篇文章 ¥79.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue项目中使用Snap.svg库时遇到的`Cannot read property 'on' of undefined`错误。通过详细步骤展示了如何正确安装和引入snapsvg-cjs，避免编译错误，成功显示SVG图形。

1、第一步，安装snapsvg，可以通过下面命令安装：

npm install -S snapsvg

2、编写test.vue组件代码，使用vue cli 3 构建：

<template>
	<svg id="svg" width="100%" height="100%"></svg>
</template>

<script>
	
import Snap from 'snapsvg';

export default {
	components: {},
	data() {
		return {};
	},
	computed: {},
	watch: {},
	created: function() {},
	mounted: function() {
		var s = Snap("#svg");
		var bigCircle = s.circle(150, 150, 100);
	},
	methods: {}
};
</script>

<style lang="scss" scoped="scoped"></style>

3、显示图形如下所示黑色实心圆：