使用 Vue.js 在 <svg> 元素中渲染 svg 内容答案

【问题标题】：Render svg content within <svg> element with Vue.js使用 Vue.js 在 <svg> 元素中渲染 svg 内容
【发布时间】：2020-03-29 18:07:00
【问题描述】：

我有一个动态构建 svg 元素内容的 Vue.js 组件。为简单起见，假设内容为<circle cx="50" cy="50" r="60" />

组件通过操作名为 svg 的数据变量来实现这一点：

  data() {
    return {
      svg: '<circle cx="50" cy="50" r="60" />',
      foobar: 'foobar',
    };
  },

我在父组件中有一些特定的 svg 元素自定义（即宽度、高度、视图框）。如何以“原始”形式在模板中呈现它？

<template>
<svg v-html="svg"></svg>
</template>

将添加我不想要的 svg 元素

【问题讨论】：

【解决方案1】：

最简单的方法是将v-html 放在标准SVG <g>（组）元素上：

<template>
  <g v-html="svg"></g>
</template>

这不会呈现 html 的“原始”形式，但 <g> 元素应该不是问题

【讨论】：