解决uniapp和svg中<text>冲突的问题

问题描述

将一个vue项目中的svg代码复制到uniapp中发现svg的文字消失了

排查经历

查看浏览器最终代码

vue：

uniapp：

发现svg文字之所以不能展示是因为uniapp将编译为了。

解决方法

使用render函数渲染一个组件替换

关键代码：

components: {
                //组件名称
		'svg-text': { 
                        //传入的参数
			props: {
				text: ''
			},
                        //生成一个text元素
			render(createElement) {
				return createElement('text', { class: 'svg-text' }, this.text);
			}
		}
	}

如果您还对虚拟 DOM 和渲染函数不熟悉的话，请先阅读vue的官方文档——渲染机制。

结果展示