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图像的raphaelid
    rsr.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