如何从服务器加载SVG并将其插入内联
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何从服务器加载SVG并将其插入内联相关的知识,希望对你有一定的参考价值。
目前,我正在使用像这个svg-inline-loader plugin这样的Webpack的solution,它适用于静态图标。
但现在我需要从HTTP服务器加载图标。当我尝试将图标的url写入向量的src时,它不起作用。我可以使用<img>
标签,但我需要更改填充颜色。
如何从服务器加载图标并将其作为内联SVG插入?
答案
Stephen Thomas shared a valid solution和他的link to loading inline svg。
在Vue中看起来如下所示。
假设后端返回以下SVG(注意fill="currentColor"
):
<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512">
<path fill="currentColor"
d="M323.1 441l53.9-53.9c9.4-9.4 9.4-24.5 0-33.9L279.8 256l97.2-97.2c9.4-9.4 9.4-24.5 0-33.9L323.1 71c-9.4-9.4-24.5-9.4-33.9 0L192 168.2 94.8 71c-9.4-9.4-24.5-9.4-33.9 0L7 124.9c-9.4 9.4-9.4 24.5 0 33.9l97.2 97.2L7 353.2c-9.4 9.4-9.4 24.5 0 33.9L60.9 441c9.4 9.4 24.5 9.4 33.9 0l97.2-97.2 97.2 97.2c9.3 9.3 24.5 9.3 33.9 0z"></path>
</svg>
您可以创建一个超级简单的SVG图像组件:
<template>
<span v-html="content" />
</template>
<script>
export default {
props: {
src: {
type: String,
required: true,
}
},
data() {
return {content: ''};
},
watch: {
src: {
immediate: true,
handler(src) {
axios(src).then((response) => this.content = response.data);
}
}
},
}
</script>
然后在需要时使用它:
<template>
<svg-img :src="svgSrc" />
</template>
<script>
import SvgImg from './components/SvgImg.vue';
export default {
components: {
SvgImg
},
data: {
svgSrc: 'url/to/backend/times.svg',
},
}
</script>
以上是关于如何从服务器加载SVG并将其插入内联的主要内容,如果未能解决你的问题,请参考以下文章
Nuxt 不会在 Firefox 中将内联 SVG 作为 Vue 组件加载,我该怎么办?