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