Raphael.js image 在ie8下面的兼容性问题-原创手记-慕课网

近期用raphael.js库最了一个进度条，类似这种的图片描述

，经过一顿修改，终于完成了。开心中。。然而我去测试兼容性的时候，发现ie8底下的灰色背景图片严重变形。
以下代码:var demo = {
paper: null,
init: function(bg,percent,obj,color){
//初始化Raphael画布
this.paper = Raphael(bg, 304, 255);
//把底图先画上去
this.paper.image("${ctx }/static/new_qzxq/images/operationReport/progressBg.png", 72, 50, 164, 164);
//进度比例，0到1，在本例中我们画65%
//需要注意，下面的算法不支持画100%，要按99.99%来画
var drawPercent = percent >= 1 ? 0.9999 : percent;
//由于只画一条弧，所以参数简单多了，只用计算弧的起点和终点就好了，与上一篇相比简化了许多
var r = 80, PI = Math.PI,
p1 = {
x:154,
y:52
},
p2 = {
x:p1.x + r Math.sin(PI - 2 PI drawPercent),
y:p1.y + r + r Math.cos(PI - 2 PI drawPercent)
},
path = [
'M', p1.x, ' ', p1.y,
'A', r, ' ', r, ' 0 ', percent > 0.5 ? 1 : 0, ' 1 ', p2.x, ' ', p2.y
].join('');

            this.paper.path(path) 
                //线的粗线为6 
                .attr({"stroke-width":40, "stroke":color}); 

            //显示进度文字 
            $(obj).prepend(Math.round(percent * 100)); 
        } 

    }; 
    $(function(){ 
        demo.init('bg',0.15,".txt","#76b6ff"); 
        demo.init('bg2',0.20,".txt2","#ffb376");
        demo.init('bg3',0.25,".txt3","#9d76ff");
        demo.init('bg4',0.30,".txt4","#ff76ba");
        demo.init('bg5',0.35,".txt5","#69d27d");
    });

然后百度搜索下，说是在ie8中svg里面的Image缺少单位然后解析不同，然后查了下说是修改跟踪源码在Raphael.js 4953行中fill.size = .fillsize[0] * abs(sx) + S + .fillsize1 abs(sy);这里是没有单位，也是罪恶源泉，我们修改成fill.size = _.fillsize[0] abs(sx) / 1.34 + "pt" + S + _.fillsize1 * abs(sy) / 1.34 + "pt";一切问题搞得。然而我打开rapheal.js搜索并没有4953行也没fill.size。于是一顿苦恼，然后我试着打到raphael.js。全局搜索image发现了坐标，半径，宽度，高度。图片描述
然后我在原来的x:c。后面加上+'px'后。在打开ie8看了下。可以了。没有影响到效果。棒棒哒！
希望对遇到这个问题的小伙伴有所帮助！