JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

查看: 775|回复: 0

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

[复制链接]

admin

TA的每日心情

	奋斗 2024-11-24 15:47

签到天数: 804 天

[LV.10]以坛为家III

2053 主题	2111 帖子	72万积分

管理员

Rank: 9 Rank: 9 Rank: 9

积分: 726782

发消息

发表于 2021-8-31 16:56:49 | 显示全部楼层 |阅读模式

本站已经为数万IT学习者服务超过8年！成为本站VIP会员，免金币下载本站10000G+VIP会员资料！所有VIP资料>>

因为低版本的safari浏览器不支持svg下的innerHTML方法

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

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

从gitHub上找到了一个小插件，简单修改即可实现

https://github.com/phaistonian/SVGInnerHTML

我们修改的内容有这些：

修改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;
}*/

哎...今天够累的，签到来了1...

使用道具举报

返回列表

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

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