vue加载远程的svg文件

最新推荐文章于 2025-06-16 09:00:01 发布

原创最新推荐文章于 2025-06-16 09:00:01 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章讲述了如何将SVG图标从系统中提取并放在服务器上，通过HTML的v-html指令结合Vue.js来实现SVG的动态加载。在Vue组件的mounted生命周期钩子中，获取SVG内容并设置其fill属性以改变颜色。参考了相关博客文章解决此问题。

文章目录

前言
一、直接上代码

前言

准备把系统中svg提取出来放到服务器上面然后就遇到了一系列的问题本来可以使用img,object, embed标签就能解决但是由于使用svg 填充颜色属性。然后就不停的百度百度 .... 好在最终还是曲线救国成功的解决了这个问题

一、直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.drawing {
			  width: 100px;
			  height: 100px;
			}
			.drawing circle {
			  stroke: cyan;
			}
		</style>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  <div
		    class="drawing"
		    ref="drawing"
		    v-html="svgData"
		  ></div>
		</div>
	</body>
	<script>
		const svgPath = 'https://open.resource.jybigdata.com/jybaseframe/static/icons/svg/bug.svg';
		const app = new Vue({
		  el: '#app',
		  data: {
		    svgData: '',
		  },
		  async mounted() {
		    const svgResponse = await fetch(svgPath);
		    this.svgData = await svgResponse.text();
			this.$nextTick(() => {
				const svg = this.$refs.drawing.firstElementChild;
				svg.setAttribute('fill', '#000');
				console.log(svg);
			})
		  }
		});
	</script>
</html>