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

因为低版本的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;}*/
 
时间: 2024-08-24 16:38:11

safari不支持svg的innerHTML方法的解决方案的相关文章

jquery 1.9版本后不在支持browser 方法的解决方案

今天对jquery 进行升级,导致项目出错,原来在1.9版本之后 jquery 不支持browser 方法了.  官方建议的又不好用,所以我所jquery 原来的代码摘除来,又扩展回去. //解决jquery 1.9版本之后不支持 browser 这里进行了扩展 var a, b; $.uaMatch = function (a) { a = a.toLowerCase(); var b = /(chrome)[ \/]([\w.]+)/.exec(a) || /(webkit)[ \/]([\

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法转

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在 雅朋网 的一个网友帖子的帮助下解决了问题,也参考了 千寻学习网 的资料,先将解决方法总结如下: 首先需要确保你的HTML页面开始部分要有DOC

转载------让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

本文是转载及收藏 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在 雅朋网 的一个网友帖子的帮助下解决了问题,也参考了 千寻学习网 的资料,先将解决方法总结如下: 首先需要确保你的HTML页面

让IE6、IE7支持querySelectorAll和querySelector方法

querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素.目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. 关于querySelector 和 querySelectorAll 方法的使用,请参考各浏览器中querySelector和querySelectorAll的实现差异和javascript

RF1001: 各浏览器对 '@font-face' 规则支持的字体格式不同,IE 支持 EOT 字体,Firefox Safari Opera 支持 TrueType 等字体

http://w3help.org/zh-cn/causes/RF1001 http://blog.csdn.net/agileclipse/article/details/12450949 http://www.zhaozi.cn/html/fonts/  字体网 作者:陆远 标准参考 根据 CSS3 草案中的描述,'@font-face' 规则允许使用链接到需要时自动激活的字体.这使得用户可以使用在线的字体,而不仅仅拘泥于使用用户端系统内的字体.一套对字体的描述定义了字体资源的位置,可以是本

对象不支持ajax属性或方法

今天在做泛微流程开发的时候,遇到一件很奇怪的事情,流程流转到第二个节点,居然报错了,提示”对象不支持ajax属性和方法“,但是第一个节点测试并未报错了, /(ㄒoㄒ)/~~,然后试着把jQuery的简写“$"改成”JQuery“后,不在提示”对象不支持ajax属性和方法“错误,而是变成了“automation服务器不能创建对象”问题,看下了错误的代码 行”var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLH

让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解

做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscroll改变top值是一个方法,但如果滚轮滚的快,会出现卡闪烁情况.而如高级浏览器如果也这样用,那显然有失大雅,除非JS中判断浏览器版本.但是在这里笔者要讲解的是使用CSS完成fixed效果. 千言万语不及实例一个: 以上是笔者在IETester下测试IE6的fixed,注意看滚动条.其中导航采用的是po

phpstorm 支持 ThinkPHP 框架的方法

在网上找了好久,各种推荐和设置,都没什么用,最后决定到 phpstrom 插件库里面搜一下,还真找到了. 1. 进入 File - Setting - Plugins ,搜索 ThinkPHP 关键字,提示说没有完全符合的: 2. 仔细观察后,下面有一个类似的,即 Thinkstorm,点开看一下注释,支持 D() 和 M() 方法... 3. 安装后测试,随便试了几个用法,还不错.

javascript错误:对象不支持此属性或方法

javascript错误:对象不支持此属性或方法 出现如上错误的原因主要有以下两种: 1.方法对应的JS函数未定义 2.属性所用的id名字跟函数名相同也会报此错误,id或函数名改个地方即可.