vue中使用snap.svg

最新推荐文章于 2024-11-19 23:10:54 发布

暴走十八步

最新推荐文章于 2024-11-19 23:10:54 发布

阅读量1.8k

点赞数 6

分类专栏： HTML5 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/wayhb/article/details/121009402

版权

HTML5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了两种在Vue项目中引入Snap.svg库的方法：一是通过imports-loader，二是直接在index.html中引入。详细步骤包括安装、引入和使用示例，并提供了Snap.svg的简单应用，如创建圆形。此外，还提到了其他可能的引入方式和相关资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一

利用imports-loader来引入snapsvg

1，安装`snapsvg`

cnpm i snapsvg --save-dev

cnpm i imports-loader@0.8.0 --save-dev

imports-loader版本要小于1.0.0
snapsvg和imports-loader最好都装在devDependencies中
npm中snap.svg说明

"devDependencies": {
    "imports-loader": "^0.8.0",
    "snapsvg": "^0.5.1"
  }

2，引入`snapsvg`

const Snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`);

3,示例

<template>
	<div id="snap-svg">
		<svg id="svg"></svg>
	</div>
</template>

<script>
	const Snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`);
	export default{
		mounted() {
			var s = Snap("#svg");
			s.circle(150, 150, 100);
		},
	}
</script>

<svg id="svg"></svg> – svg图像才能被实例化，div实例化后不识别
其他用法和官网一致 http://snapsvg.io/

方法二

直接在index.js中引入snapsvg

1,引入

在vue项目public文件下index.html直接引入

<script src="./snap.svg-min.js" type="text/javascript" charset="utf-8"></script>

2，使用

<template>
	<div id="snap-svg">
		<svg id="svg"></svg>
	</div>
</template>

<script>
	export default{
		mounted() {
			var s = Snap("#svg");
			s.circle(150, 150, 100);
		},
	}
</script>