问题产生背景
我们的项目是离线h5项目，原生在有图表的页面截图时，部分机型截不了canvas渲染的图表；沟通后，前端使用svg进行渲染，同时svg渲染相对性能更高，尤其对配置不太高的机型来说，但是当legend有滚动时，会导致两个问题，一个是文字丢失，另外还有翻页小按钮和图例的重影问题。
使用版本
{
"vue-echarts": "^3.1.3",
"echarts": "^4.1.0",
}
原因
两个问题产生的根本原因：
通过查看svg的dom元素，发现text标签属性设置了
clip-path，就会导致文字显示不出来；重影是分页标签元素没有纯色背景覆盖，导致有滑动效果时，就会重叠。
解决
上
github，去echarts的isuues上去找了相关问题，发现这个问题很多人都会出现，然后看见开发人员都说在5版本的时候会解决。当时出现这个问题比较早，那时候5还没出，而且因为项目中用图表的地方比较多，升级5后，有很多用法需要改，风险也比较大。
最后用了硬编码的方式，去解决了这个问题，这里简单记录一下。
-
通过js查找svg中dom元素text标签，将text标签的
clip-path属性设置为none:text.setAttribute('clip-path', 'none')这样文字就能显示出来。
解决重叠，先找到滚动按钮的标签，然后创建纯色的svg里面的path标签块，并将其放在合适的位置，这样就可以遮挡下面滚动的legend，就不会出现重叠。下面生成svg或html元素的方法：
/**
* 根据dom字符串生成对应的dom元素
* @param {string} str dom字符串
* @param {string} type 与元素相关联的命名空间类型，html或svg
*/
function domStringTransformElement(str, type = 'html') {
let config = null;
if (type === 'html') {
config = {
namespace: 'http://www.w3.org/1999/xhtml',
elName: 'div'
}
} else if (type === 'svg') {
config = {
namespace: 'http://www.w3.org/2000/svg',
elName: 'svg'
}
}
// 先生成dom容器
const container = document.createElementNS(config.namespace, config.elName);
container.innerHTML = str
return container.children;
}
// 定义path标签的dom字符串
const pathStr = '<path d="M 0 0 L 100 0 L 100 25 L 0 25 Z" fill="#fff" fill-opacity="1" stroke="none" clip-path="none"></path>';
const pathDom = domStringTransformElement(pathStr, 'svg');
svg元素里面的一些属性所代表的意思可以自行查阅，这里不做过多解释。
