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、显示图形如下所示黑色实心圆:
4、