SVG元素内的Vue.js组件不工作

Question

我有一个名为legend的组件，它应该将SVG元素嵌入到放置实际SVG标记的模板中：

    <svg xmlns="http://www.w3.org/2000/svg" class="pie-chart" :width="outerwidth" :height="outerheight">

    <legend ref="legend" :series="series" :position="positionLegend" :options="{}" ></legend>   

    </svg>

但是图例组件不会被渲染，输出是：

   <div id="graphbox">
       <svg xmlns="http://www.w3.org/2000/svg" width="1691" height="14" class="pie-chart">

       <legend series="[object Object],[object Object],[object Object]" position="[object Object]" options="[object Object]"></legend>

        </svg>
    </div> 

vue不能在SVG标签中解析吗？

Answer 1

<svg>中的组件应该可以正常工作，但您需要将legend重命名为其他名称。legend是一个标准的超文本标记语言元素名称，所以Vue会被混淆。

还要确保您已经正确地注册了组件，无论是本地注册还是全局注册。通常，如果您忘记注册组件，Vue会发出警告，但在本例中不会，因为legend是一个标准的HTML元素。

下面是一个完整的示例，与问题中的示例类似：

​

const myLegend = {
  template: `<circle r="10" cx="20" cy="20" :fill="color" />`,
  props: ['color']
}

new Vue({
  el: '#graphbox',
  
  components: {
    myLegend
  },
  
  data () {
    return {
      outerheight: 50,
      outerwidth: 50,
      color: '#ff0000'
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="graphbox">
  <svg :width="outerwidth" :height="outerheight">
    <my-legend :color="color"></my-legend>   
  </svg>
</div>

​