IE8展示SVG图像问题处理

问题背景如下：

系统采用dorado5。只能支持在IE8以下内核版本才能稳定运行。但在IE8-以及Android 2.3默认浏览器是不支持SVG的。

有一个功能需要使用svg矢量图，但是直接用矢量图的js插件画图形太多复杂，因此想将画完的svg文件直接显示，或者转成js代码来显示。同事交接给我时，原来使用的是Raphael插件raphael-svg-import.js，该插件会自动将字符串形式传入的svg代码转为vml代码，同样也是会出现部分图形无法展示的问题。

首先简单了解一下Raphael：

Raphael是以SVG和VML(在IE5-8支持的格式)为基础的。如果想在IE5-8显示矢量图形，必须使用Raphael库。Raphael的API和SVG和jquery一样属于独立的API.Raphael并非是作为图像格式使用的，需要通过Javascript绘制。

而SVG在是刚刚在IE9当中支持的。不是任何浏览器中都能支持的。

以上转自博客：http://blog.csdn.net/baohanqing/article/details/17688385。

先后对比了其他的几个矢量图形的js插件，如echar，highchar，D3等，发现对于IE8以下的浏览器兼容性最好的其实还是Raphael。

然后偶然间找到一个国外的网站http://readysetraphael.com/可以提供将svg文件转为Raphael代码。转换效果比raphael-svg-import.js好得多。

以下为Raphael在IE8以下操作svg图形的解决方案：

1、http://readysetraphael.com/转换工具只支持以下格式的svg元素转换，无法展示虚线。

注：线条用矩形代替

2、通过AI画好的图形建议都添加轮廓，保证转换后的代码不会发生位移。后续可能需要在代码中做操作的数据部分用文本表示，在画完AI后置顶到最上层，方便在生成的raphael代码中找到对应的文本对象。

3、通过readysetraphael转换的文本代码，位置有所偏移x:+12，y:-7（向右偏移12像素，向上7像素）。需要修改转换后文本对象的位置代码。

4、在jsp中通过js操作svg的元素对象可先在IE内核下进行debug，选中要操作的图形，找到对象的raphaelid。在使用raphael的getById(num)方法获取到对象。

示例代码：

var rsr;
var text_eo = 0.5;
var text_ep = 1;function Init(){rsr = Raphael(10, 10, 1000, 1500);//......var text_ep = rsr.text(0, 0, '1.0');text_ep.attr({"font-family": 'MicrosoftYaHei',"font-size": '18','stroke-width': '0','stroke-opacity': '1','fill': '#000000'});text_ep.transform("m1 0 0 1 314.252 317.8833").data('id', 'text_ep');var text_eq = rsr.text(0, 0, '0.2');text_eq.attr({"font-family": 'MicrosoftYaHei',"font-size": '18','stroke-width': '0','stroke-opacity': '1','fill': '#000000'});text_eq.transform("m1 0 0 1 326.6104 154.6362").data('id', 'text_eq');//......}function Init1(){text_eo += 0.5;text_ep += 1;//在ie内核下调试，获取要修改的svg图像的raphaelidrsr.getById(106).attr('text',text_ep);rsr.getById(107).attr('text',text_eq);rsr.getById(0).attr('fill','#'+text_ep+text_ep+text_ep+text_ep+text_ep+text_ep);
}window.onload = Init;//页面加载完毕后执行初始化方法init

IE8展示SVG图像问题处理相关推荐

SVG 图像入门教程
http://www.ruanyifeng.com/blog/2018/08/svg.html 一.概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector ...
java fx svg 图像缩放控件_SVG（可缩放矢量图形）
SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C("World Wide Web C ...
python 绘制图表生成svg文件_python用Pygal如何生成漂亮的SVG图像详解
前言 SVG可以算是目前最最火热的图像文件格式了,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形.它是基于XML(Extensible Markup Langu ...
java更改svg图片颜色_如何使用Leaflet库填充SVG图像中的颜色
是否可以根据SVG图像的layerPoints(x和y)填充颜色?我已经提到了下面的脚本来加载div中的SVG图像 . SVG图像中有三个部分,我必须用不同的颜色区分每个部分 . 需要一些帮助来实现这 ...
了解 svg 图像和元素创建
可缩放矢量图形(Scalable Vector Graphics,SVG),是一种用于描述二维的矢量图形,基于 XML 的标记语言.作为一个基于文本的开放网络标准,SVG 能够优雅而简洁地渲染不同大小 ...
word中插入emf,svg图像的注意事项
word中可以直接插入emf,svg图像,另存为PDF格式后,对应图像是矢量图像(无限放大不失真) 注意事项:1. 可以直接在正文中插入 2. 可以在文本框中插入 3. 插入矢量图的文本框不可以再与其 ...
java fx svg 图像缩放控件,支持调整SVG图像大小！Aspose.Imaging v19.11新功能示例演示！...
Aspose.Imaging for .NET一种高级图像处理控件,允许开发人员创建,编辑,绘制或转换图像.图像导出和转换是API核心功能之一,它允许在不安装Photoshop应用程序或任何其他图像编 ...
苹果系统使用svg 动画_为什么要使用SVG图像：如何为SVG设置动画并使其快速闪电化
苹果系统使用svg 动画我们为什么要使用SVG? (Why Are We Using SVG?) The web development sector is growing at a rapid p ...
将SVG图像插入到Word中 - Tools
将svg图像使用Visio打开后, 导出格式为emf格式, 然后就可以直接拖进word了参考内容将SVG格式的图片嵌入Word中

IE8展示SVG图像问题处理

IE8展示SVG图像问题处理相关推荐

最新文章

热门文章