vue加载远程的svg文件

最新推荐文章于 2024-05-14 23:51:42 发布

stpzhf

最新推荐文章于 2024-05-14 23:51:42 发布

阅读量936

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/stpzhf/article/details/130348543

版权

文章目录

前言
一、直接上代码

前言

准备把系统中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>

直接将svg插入到页面的div标签中

参考文章:
https://blog.csdn.net/weixin_42390878/article/details/85111086
https://www.likecs.com/ask-2111915.html

stpzhf

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue加载远程的svg文件

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

扫一扫