javascript - 在其中渲染 svg 内容 element with Vue.js

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 元素自定义（即宽度、高度、视图框）。如何以“原始”形式在模板中呈现它？

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

将添加我不想要的 svg 元素

标签： javascriptvue.jssvg

Answer 1

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

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

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