vue3的zrender怎么展示svg图

要在Vue3中使用ZRender来显示SVG图像，需要先将SVG转换为ZRender支持的JSON格式。可以使用ZRender提供的SVGtoZRender工具来完成这一过程。

安装SVGtoZRender:

npm install svg-to-zrender

使用SVGtoZRender将SVG转换为ZRender JSON格式:

import svgToZrender from 'svg-to-zrender'

let svgStr = '<svg><rect x="10" y="10" width="50" height="50" /></svg>'
let zrJson = svgToZrender(svgStr)

然后在Vue3中使用ZRender组件来展示转换后的JSON格式:

<template>
  <div>
    <z-render :option="zrJson" />
  </div>
</template>

<script>
import ZRender from 'zrender-for-vue3'
import svgToZrender from 'svg-to-zrender'

export default {
  components: {
    ZRender
  },
  data() {
    return {
      svgStr: '<svg><rect x="10" y="10" width="50" height="50" /></svg>',
      zrJson: {}
    }
  },
  mounted() {
    this.zrJson = svgToZrender(this.svgStr)
  }
}
</script>

请注意，这里的ZRender组件是使用zrender-for-vue3库提供的。建议使用该库来在Vue3中使用ZRender。