svgView组件，根据后端地址加载svg图

首先说加载后端svg图片到vue项目中的方式：

1. 通过v-html 绑定的方式，需要请求得到svg的xml结构的代码

<div class="svg-view" ref="svg-view" v-html="svgXml" :style="svgStyle"></div>

2. 也可以直接通过后端url地址加载svg
   主要有两种方法：embed 和 object

    <vue-loading :spinning="loader">
      <embed
        ref="svg-embed"
        :src="'api/vfs/resource/' + svgId + '?' + token"
        :width="width"
        :height="height"
        type="image/svg+xml"
      />
    </vue-loading>

<object
      type="image/svg+xml"
      :data="'api/vfs/resource/' + svgId + '?' + token"
      class="example"
      :width="width"
      :height="height"
    >
    </object>

说明： 其中vue-loading 是加载中的一个组件
如果你想要改变svg的颜色，一定要等svg加载完成，才能通过以下方式获取到svg，并且修改svg的颜色

var svgDom = this.$refs["svg-embed"];
let svgDoc = svgDom.getSVGDocument();
this.svgDom = svgDoc.getElementsByTagName("svg")[0];
this.svgDom.style.fill = this.color;
this.svgDom.style.backgroundColor = this.backgroundColor;
this.loader = false;

附加： ant-design-vue 自定义loading组件

<template>
  <div :class="{ 'spin-nested-loading': hasContent }">
    <div :class="{ hide: !spinning }">
      <a-icon class="loading-icon" type="loading" />
    </div>
    <div :class="contentClasses" v-if="hasContent">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "ant-design-vue";
import "ant-design-vue/lib/icon/style/css";
Vue.use(Icon);
export default {
  name: "VueLoading",
  props: {
    size: {
      type: String,
      default: ""
    },
    tip: {
      type: String
    },
    spinning: {
      type: Boolean,
      default: true
    },
    noDot: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      hasContent: false
    };
  },
  computed: {
    contentClasses() {
      return ["spin-container"];
    }
  },
  mounted() {
    this.hasContent = this.$slots.default !== undefined;
  }
};
</script>

<style lang="scss" scoped>
.hide {
  display: none;
}
.spin-spinning {
  opacity: 0.5;
  position: static;
  display: inline-block;
}
.spin-nested-loading {
  position: relative;
  width: 100%;
  height: 100%;
  div {
    height: 100%;
    .loading-icon {
      position: absolute;
      top: calc(50% - 8px);
      left: calc(50% - 8px);
      width: 16px;
    }
  }
}
</style>