vuejs 在组件上渲染 <svg> 标签答案

【问题标题】：vuejs render <svg> tag on componentvuejs 在组件上渲染 <svg> 标签
【发布时间】：2019-08-09 03:03:43
【问题描述】：

我正在寻找如何渲染到 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>

我正在寻找呈现为图形的方法。

【问题讨论】：

我不太明白。究竟是什么不工作？您能否为您的问题添加更多细节？
也许你的意思是它显示 html 而不是解释它？

标签： vue.js svg

【解决方案1】：

如documentation中所述：

双胡须将数据解释为纯文本，而不是 HTML。为了输出真正的 HTML，您需要使用 v-html 指令。

在你的情况下：

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

【讨论】：