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

Question

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

该组件通过操作名为 svg 的数据变量来实现此目的:

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

我在父组件中有一些特定的 svg 元素自定义(即宽度、高度、viewBox)。如何在模板中以“原始”形式呈现此内容？

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

将添加我不想要的 svg 元素

Answer 1

最简单的方法是输入 v-html在标准 SVG 上 <g> (组)元素:

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

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