vuejs рендер <svg>тег на компоненте

Question

Я ищу способ визуализации компонента в проекте vuejs.

Я использую https://github.com/juliuste/parliament-svg для создания диаграммы.

вот мой код

created() {
    let parties = {
      linke: {
        seats: 64,
        colour: "#a08"
      },
      spd: {
        seats: 193,
        colour: "#e02"
      },
      gruene: {
        seats: 63,
        colour: "#0b2"
      },
      union: {
        seats: 311,
        colour: "#333"
      }
    };
    const svg = parliamentSVG(parties, true);
    var stringify = require("virtual-dom-stringify");
    this.parliamentSVG = stringify(svg);
  }

которые возвращают

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-20.487130703115444,-20.487130703115444,40.97426140623089,20.97426140623089"><circle cx="-20" r="0.38970456249235585" fill="#a08" class="linke"></circle><circle cx="-19.9766445366" cy="-0.9662675905" r="0.38970456249235585" fill="#a08" class="linke"></circle><circle cx="-19.9066326944" cy="-1.9302784183" r="0.38970456249235585" fill="#a08" class="linke"></circle><circle cx="-19.790127989" cy="-2.8897809914" r="0.38970456249235585" fill="#a08" class="linke"></circle><circle cx="-19.6274025228" cy="-3.8425343471" r="0.38970456249235585" fill="#a08" class="linke"></circle><circle cx="-19.4188363485" cy="-4.7863132858" r="0.38970456249235585" fill="#a08" class="linke"></circle><circle cx="-19.1649165822" cy="-5.718913568" r="0.38970456249235585" fill="#e02" class="spd"></circle><circle cx="-18.8662362652" cy="-6.6381570626" r="0.38970456249235585" fill="#e02" class="spd"></circle><circle cx="-18.5234929792" cy="-7.5418968338" r="0.38970456249235585" fill="#e02" class="spd"></circle><circle cx="-18.137487217" cy="-8.4280221555" r="0.38970456249235585" fill="#e02" class="spd"></circle><circle cx="-17.7091205131" ....

в <div>{{parliamentSVG}}</div>

Я ищу способ визуализации в виде графика.

Answer 1

Как указано в документации :

Двойные усы интерпретируют данные как обычный текст, а не HTML.Чтобы вывести настоящий HTML, вам нужно использовать директиву v-html.

---

В вашем случае:

<div v-html="parliamentSVG"></div>