如何将外部 SVG 作为对象加载到 Vue

Question

我需要将 SVG 文件加载到 Vue 模板中。它必须以这样一种方式加载，以便我可以使用 js 和 css 访问内部类，所以大概我正在寻找一个 <object> 标签而不是 <img> 标签。

SVG 位于外部服务器上，不是我项目的一部分。如果我将 svg 作为项目的一部分，Vue-Svg-Loader 就可以正常工作，但是当 SVG 直到运行时才可用时，它似乎不起作用。

我尝试了以下方法

<template>
    <div ref="floorplan" id="floorplan-frame">
        <object
            type="image/svg+xml"
            id="floorplan"
            :data="svgPath"
        ></object>
    </div>
</template>

<script>
export default {
    data() {
        return {
            svgPath: 'http://test-mc4/floorplan.svg',
        };
    },
};
</script>

不幸的是，它不起作用。如果我用<img :src="svgPath" /> 替换<object> 标记，它确实显示了SVG，但作为内部css 类不可用的静态图像。它确实向我表明我的路径是正确的并且文件实际上是可用的，但它并没有解释为什么我使用它时对象标签只是空的。

我进行了广泛的搜索，如果它是内部的，我可以弄清楚如何将其加载为对象，或者只要它是图像，如何将其加载为外部。我似乎无法弄清楚如何做到这两点。

Answer 1

为了访问<object> 中的元素，您需要等到它被加载（load 事件），然后通过其contentDocument property 访问子 SVG 文档。

很遗憾，这不适用于您的情况，因为 SVG 文件来自不同的来源。 same-origin policy 将阻止对contentDocument 的访问。这是一个示例，它也失败了（记录 null），因为 data: URL 是不同的来源：

const svgPath = 'data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwIDIwIj4NCiAgICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSIxMCIgZmlsbD0icmVkIi8+DQo8L3N2Zz4=';

const app = new Vue({
  el: '#app',
  data: {
    svgPath,
  },
  methods: {
    svgLoaded() {
      setTimeout(() => {
        console.log(this.$refs.object.contentDocument);
      }, 1000);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <object
    ref="object"
    :data="svgPath"
    width="100"
    height="100"
    v-on:load="svgLoaded"
  ></object>
</div>

从不同来源加载 SVG 然后使用 JS 和 CSS 访问其内部结构的唯一方法是 fetch 它，然后将其作为 v-html 加载到您的组件中。 请注意，这会打开严重的 XSS 漏洞；您应该警惕此选项，并且仅将其与您信任的外部服务器一起使用。无论如何，这是一个工作示例：

const svgPath = 'data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwIDIwIj4NCiAgICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSIxMCIgZmlsbD0icmVkIi8+DQo8L3N2Zz4=';

const app = new Vue({
  el: '#app',
  data: {
    svgData: '',
  },
  async mounted() {
    const svgResponse = await fetch(svgPath);
    this.svgData = await svgResponse.text();
    await Vue.nextTick();

    // SVG is present in the DOM at this point
    const svg = this.$refs.drawing.firstElementChild;
    console.log(svg.outerHTML);

    // DOM manipulations can be performed
    const circle = svg.querySelector('circle');
    circle.setAttribute('fill', 'blue');
    circle.setAttribute('r', '6');
  }
});

.drawing {
  width: 100px;
  height: 100px;
}

/* SVG can be styled as part of the main document */
.drawing circle {
  stroke: cyan;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div
    class="drawing"
    ref="drawing"
    v-html="svgData"
  ></div>
</div>