`
min4450
  • 浏览: 13164 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
最近访客 更多访客>>
社区版块
存档分类
最新评论

SVG 在ASV 和 FF的兼容性说明

阅读更多
1.使用名字空间敏感的DOM方法
      DOM Level 1推荐标准在XML标准中出现名字空间之前发布,因此DOM1不是名字空间敏感的。这就引发了名字空间化XML中的问题,例如SVG。为解决这些问题,DOM Level 2核心添加了与DOM Level 1 对等的,但是名字空间敏感的方法。编写SVG时应使用名字空间敏感的方法。下表列出了不应再使用的DOM Level 1 方法以及与之对应的并推荐使用的DOM2方法。

DOM1 (不再使用)
  
DOM2 (推荐使用)
createAttribute
createAttributeNS

createElement  
createElementNS

getAttributeNode  
getAttributeNodeNS

getAttribute  
getAttributeNS

getElementsByTagName  
getElementsByTagNameNS (也应用在元素上)

getNamedItem  
getNamedItemNS

hasAttribute  
hasAttributeNS

removeAttribute  
removeAttributeNS

removeNamedItem  
removeNamedItemNS

setAttribute  
setAttributeNS

setAttributeNode  
setAttributeNodeNS

setNamedItem  
setNamedItemNS

      所有DOM2名字空间敏感方法的第一个参数必须是所操作元素或属性的“名字空间名称”。对SVG元素是“http://www.w3.org/2000 /svg”,然而,请注意:XML 1.1推荐标准中的名字空间规定,不带前缀属性的名字空间名称为空。也就是说,对SVG属性必须使用null名字空间。
因此,使用 createElementNS创建一个SVG “rect”元素必须写为:
        createElementNS('http://www.w3.org/2000/svg', 'rect');
然而取得该“rect”元素中的“x”属性值必须写为:
        getAttributeNS(null, 'x');
注意对其它(非SVG)名字空间的属性并不适用。例如xlink:href使用了一个名字空间前缀,因为存在一个名字空间前缀标记(xlink),名字空间名称为前缀的值即http://www.w3.org/1999/xlink,因此取得元素中xlink:href属性值应写为:
                getAttributeNS('http://www.w3.org/1999/xlink', 'href');
总体说来规则是比较简单的。对带有或不带有名字空间前缀的元素,以及带有名字空间前缀的属性,名字空间名称为元素或属性名字空间的URI。对不带有名字空间前缀的属性,名字空间名称为null。

2.在遍历SVG的dom时,IE下 chilldNodes只有length属性,只能通过 firstChild,nextSibling来便利DOM,也不能使用jquery的选择器在SVG dom的上下文中进行查找。
分享到:
评论

相关推荐

    Svg IE 11 兼容性问题README.md

    svg xlink:href不兼容问题解决,通过引入svg4everybody.js解决兼容,此款插件如何使用说明书

    SVG和Canvas绘图:SVG和Canvas的跨平台兼容性问题.docx

    SVG和Canvas绘图:SVG和Canvas的跨平台兼容性问题.docx

    svgs, svgs是svg与响应原生svg之间的兼容性层.zip

    svgs, svgs是svg与响应原生svg之间的兼容性层 svgs svgs MODULE 是 react-native-svg 和常规 react ( 浏览器)的兼容层,可以以是。 这使得你可以在响应中编写 SVG,并使用相同的API来响应。 使应用程序更接近于编写...

    svg图在各种浏览器中显示

    总的来说,为了让SVG在各种浏览器中都能正常显示,开发者需要了解不同浏览器的特性,合理利用兼容性策略,并结合前端框架和库来优化SVG的呈现效果。在使用Struts2这样的MVC框架时,要注意如何正确地集成和管理SVG...

    html2canvas(兼容截图svg元素)

    需要注意的是,在实际应用中可能还需要考虑其他因素,比如CSS样式、异步加载的内容以及浏览器的兼容性问题,可能需要对代码进行相应的优化和调整。 总的来说,`html2canvas`和`canvg`的结合使用,为开发者提供了一...

    SVG.rar_ASV3Sharp_site:www.pudn.com_svg

    C# SVG操作 ASV3Sharp的实现Adobe已经以ActiveX组件的方式实现了其SVG查看器. 这就给Windows开发人员提供了在自己的应用程序中内置SVG查看器的良机. 本文介绍如何在C#应用程序中使用SVG控件

    基于vue的PC组件库和svg的图表组件源码+项目说明.zip

    基于vue的PC组件库和svg的图表组件源码+项目说明.zip基于vue的PC组件库和svg的图表组件源码+项目说明.zip基于vue的PC组件库和svg的图表组件源码+项目说明.zip基于vue的PC组件库和svg的图表组件源码+项目说明.zip基于...

    wpf Image控件 加载SVG图片

    通过这种方式,你可以利用SharpVectors库将SVG图像转换为WPF兼容的ImageSource,并将其显示在Image控件中。这种方式不仅适用于单独的SVG图像,还可以应用于需要动态加载SVG资源或处理大量SVG图标的场景。 需要注意...

    HTML5 SVG动画404页面,活泼有趣,适合用在网站404页面,兼容主流浏览器

    HTML5与SVG动画404页面是...在压缩包中提供的"HTML5&SVG动画404页面,活泼有趣,适合用在网站404页面,兼容主流浏览器"文件,很可能是包含了一个示例项目,包含源代码和可能的说明文档readme.md,供学习者参考和实践。

    svg 动画管道效果

    在兼容性方面,描述提到动画效果在IE10下存在问题,这可能与IE10对SVG或CSS3动画支持的局限性有关。其他现代浏览器如Chrome、Firefox、Safari和Edge通常能更好地支持SVG和相关的JavaScript API,因此在这些浏览器上...

    svg在web调用,svg在web调用,svg在web调用

    7. **动画支持**:SVG支持SMIL动画(如`<animate>`、`<animateTransform>`等)和CSS动画,为图形添加交互性。 ```html <svg> </svg> ``` 总之,SVG在Web开发中的应用广泛且灵活,不仅可以提供高质量的图形...

    svg(SVG)

    SVG,全称Scalable Vector Graphics,是一种基于XML(可扩展标记语言)的二...SVG的广泛兼容性和强大的功能使其成为现代Web开发不可或缺的一部分。无论是初学者还是经验丰富的开发者,深入理解SVG都会带来巨大的益处。

    c/c++ svg转png, svg文件渲染例子

    此外,这个过程可能会遇到SVG文件的兼容性问题,因为PlutoSVG可能不支持某些特定的SVG特性或扩展。 在处理SVG文件时,还要考虑一些常见的问题,比如单位转换、坐标系统、颜色空间等。SVG使用CSS样式来定义图形属性...

    svg在web页面中的显示工具

    SVGWeb是一个JavaScript库,它的主要目的是解决SVG在不同浏览器之间的兼容性问题。早期,SVG并未在所有浏览器中得到广泛支持,SVGWeb通过检测浏览器的类型和版本,自动在不支持SVG的浏览器中加载Flash插件作为备选...

    全国各省市SVG地图 全国各省市SVG地图

    全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...

    H5 SVG边框特效

    因此,在使用SVG时,最好通过Modernizr等库检测浏览器兼容性。此外,尽管SVG提供了高性能和清晰度,但在大量使用时,文件大小可能会影响页面加载速度,所以要注意优化和压缩SVG代码。 总结来说,H5中的SVG边框特效...

    glide加载和下载svg矢量图片

    - 可缩放性:SVG图像可以在不影响质量的情况下进行任意缩放。 - 清晰度:无论放大或缩小,SVG图像都保持清晰。 - 小巧的文件大小:相比于位图,SVG文件通常更小,减少应用的资源占用。 - 层次结构:SVG支持图层...

    中国地图svg_地图_中国地图的SVG_

    6. 兼容性和性能:由于SVG是基于XML的,所以它在现代浏览器中具有良好的兼容性。同时,由于其矢量特性,SVG地图的加载速度通常快于同等质量的位图(如PNG、JPEG),特别是在大屏幕和高分辨率设备上。 7. 移动端优化...

    svg环形进度条兼容ie8

    在本主题中,我们将深入探讨如何创建一个兼容IE8的SVG环形进度条,并了解其背后的原理和技术。 首先,SVG环形进度条通常由一个圆形路径和填充颜色动画组成,用于显示百分比完成状态。由于IE8并不支持原生的SVG,...

    javascript实现svg导出图片

    在SVG(可缩放矢量图形)与JavaScript的结合中,导出SVG为图片功能是一项常见的需求。SVG是一种基于XML的矢量图像格式,它...在开发过程中,选择适合项目需求的技术和库,确保良好的用户体验和兼容性,是至关重要的。

Global site tag (gtag.js) - Google Analytics