Загрузка внешнего файла SVG в SVG JS (дублирующий тег SVG)

Question

Я пытаюсь загрузить файл SVG в SVG. js. Моя проблема в том, что svg. js генерирует тег svg, и когда я импортирую свой svg, он заканчивается 2 тегами SVG, что вызывает коллизии.

main. js

import Vue from 'vue'
import { SVG } from '@svgdotjs/svg.js';
Vue.prototype.$SVG = SVG;

template

  <div>
    <button @click="importSVG">import</button>
    <div ref="drawing"></div>
  </div>

  data() {
    return {
      svgFile: require("../assets/cassete.svg")
    };
  },
   importSVG() {
      fetch(this.svgFile)
        .then(res => res.text())
        .then(svg => {
          var tempEl = this.$refs.drawing;
          var draw = this.$SVG()
            .addTo(tempEl)
            .size('100%', '100%');

          draw.svg(svg);
          console.log(svg);


          var parser = new DOMParser();
          var xmlDoc = parser.parseFromString(svg, "application/xml");
          console.log(xmlDoc);
        });
    }

Результат сводится к SVG. JS создание тега svg, а также тега, уже включенного в мой файл svg.

Лучшим вариантом будет просто вишня подбирает элементы через xml дерево?

Результат

Answer 1

    importSVG() {
      fetch(this.svgFile)
        .then(res => res.text())
        .then(svg => {
          var tempEl = this.$refs.drawing;

          var draw = this.$SVG(tempEl);
          draw.svg(svg);
        });
    }

Как сказал @Alex L: «Вы должны просто добавить импортированный SVG прямо в ваш Div»

Answer 2

Вы создаете SVG, а затем снова добавляете в него SVG (из импортированных данных)

Вам просто нужно добавить импортированный SVG непосредственно в ваш Div:

  data() {
  return {
    svgFile:     require("../assets/cassete.svg")
  };
},
 importSVG() {
    fetch(this.svgFile)
      .then(res => res.text())
      .then(svg => {
        var tempEl = this.$refs.drawing;
        var draw = svg //this.$SVG()
          .addTo(tempEl)
          .size('100%', '100%');

      //draw.svg(svg);
      console.log(svg);


      var parser = new DOMParser();
      var xmlDoc = parser.parseFromString(svg, "application/xml");
      console.log(xmlDoc);
    });
}