safari不支持svg的innerHTML方法的解决方案

时间 2019-11-13

标签 safari 不支持 svg innerhtml 方法解决方案栏目 HTML 繁體版

原文原文链接

由于低版本的safari浏览器不支持svg下的innerHTML方法node

而咱们的移动端h5页面引用了d3.js插件，而d3中使用了innerHTMLgit

咱们的解决方案是不修改d3的任何原代码，去重写innerHTML方法github

从gitHub上找到了一个小插件，简单修改便可实现浏览器

https://github.com/phaistonian/SVGInnerHTMLapp

咱们修改的内容有这些：svg

修改1:增长Text节点的处理
constructors = ['SVGSVGElement', 'SVGTextElement']

修改2:增长文本的单独写入
fn = function (to, node) {
 //文本

 if (node.nodeType == 3) {
 to.appendChild(node);
 return;
 }

修改3：注释掉text时的文本写入和tspan
/*if (node.nodeName === 'TEXT' || node.nodeName === 'TSPAN') {
 newNode.textContent = node.innerHTML;
}*/