Raphael.js image 在ie8下面的兼容性问题

Raphael.js 在ie7,ie8浏览器内绘制图形采用的vml，在绘制image的时候会解析成

<?xml:namespace prefix = "rvml" ns = "urn:schemas-microsoft-com:vml" />

<rvml:shape class=rvml style="HEIGHT: 1px; WIDTH: 1px; POSITION: absolute; LEFT: 0px; FILTER: none; TOP: 0px; VISIBILITY: visible; rotation: 0; flip: " raphael="true" raphaelid="0" coordsize = "21600,21600" stroked = "f" strokecolor = "black" path = " m0,0 l37087200,0,37087200,16912800,0,16912800 xe">

<rvml:stroke class=rvml opacity = "1" miterlimit = "8">

</rvml:stroke><rvml:skew class=rvml on = "t" matrix = "1,0,0,1,0,0" offset = "-.5,-.5"></rvml:skew>

<rvml:fill class=rvml rotate = "t" src = "../123.png" type = "tile" size = "1717,783" position = "0,0"></rvml:fill>

</rvml:shape>

解决办法：

vml  image size不对的问题是因为 ie 浏览器对 fill size 单位不清晰造成的，查看mrocsoft文档知道fill使用的单位pt,而非px,图像单位我们获取的一般都是pixel也就是px。

但是1px=1.34pt这就会造成图像变形。

跟踪源码在Raphael.js  4953行中fill.size = _.fillsize[0] * abs(sx) + S + _.fillsize[1] * abs(sy);这里是没有单位，也是罪恶源泉，我们修改成fill.size = _.fillsize[0] * abs(sx) / 1.34 + "pt" + S + _.fillsize[1] * abs(sy) / 1.34 + "pt";一切问题搞得。

结果图如下：

After few hours of debug I‘ve figured out that VML implementation is missing measurement points in image tag size definition.

fill.size = _.fillsize[0] * abs(sx) + S + _.fillsize[1] * abs(sy);

fill.size = _.fillsize[0] * abs(sx)/1.34 + "pt" + S + _.fillsize[1] * abs(sy)/1.34 + "pt";

附带pt，px等一些单位的转换

Point?m   1 m = 2834.6456695 Point

Point?dm   1 dm = 283.46456695 Point

Point?cm   1 cm = 28.346456695 Point

Point?mm   1 mm = 2.8346456695 Point

Point?Pixel   1 Point = 1.333333 Pixel

Point?in   1 in = 72 Point

Point?ft   1 ft = 864 Point

Point?Pica   1 Pica = 12 Point

Point?Twip   1 Point = 20 Twip

Raphael.js image 在ie8下面的兼容性问题,古老的榕树,5-wow.com