如何从服务器加载 SVG 并将它们内联插入答案

【问题标题】：How to load SVG from a server and insert them inline如何从服务器加载 SVG 并将它们内联插入
【发布时间】：2018-05-21 18:20:35
【问题描述】：

目前，我正在使用 Webpack 的 svg-inline-loader plugin，例如 solution，它适用于静态图标。

但现在我需要从 HTTP 服务器加载图标。当我尝试将图标的 url 写入矢量的 src 时，它不起作用。我可以只使用<img> 标签，但我需要更改填充颜色。

如何从服务器加载图标并将它们作为内联 SVG 插入？

【问题讨论】：

codepen.io/eltonmesquita/post/loading-inline-svg
@StephenThomas 您链接到的正是 OP 所说的不起作用。
@EmileBergeron 感谢您的编辑。你知道什么可以帮助我吗？
@EmileBergeron 他们完全不一样。 OP 指出 webpack 加载器无法在 http 上运行。这是绝对正确的，因为 webpack 发生在构建阶段并且不涉及网络。 codepin 帖子展示了如何通过 AJAX 加载 SVG 资源并将它们注入 DOM。这正是实现 OP 要求的方法。
@StephenThomas 你是对的，我的错。我刚刚看到<img src="..."> 后备部分，并认为它不会起作用；）

标签： javascript svg vue.js

【解决方案1】：

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>

【讨论】：