Raphael.js image compatibility issues under IE8

Raphael.js the VML used to draw graphics in the Ie7,ie8 browser, which is parsed when the image is drawn

<?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>

That is, using VML to draw graphics, and after Chrome and Firfox and IE8 are used SVG to draw graphics. However, this will create a problem, in the Window 8 system, the default IE is IE10, and then use the developer tools when switching ie to IE7 IE8 when the image will be much better than the original, in the XP System or Window 7 system will have the same performance, than the dislocation, The true point coordinates are not correct and so on.

The workaround:

VML image size is incorrect because the IE browser is not clear about the fill size unit, the view Mrocsoft document knows the unit PT used in fill, not the PX, the image unit we get is generally pixel that is px.

But 1px=1.34pt this will cause image distortion.

Trace source code in Raphael.js 4953 line fill.size = _.fillsize[0] * ABS (SX) + S + _.fillsize[1] * ABS (SY); Here is no unit, also a source of evil, we changed into Fill.size = _.FILLSIZE[0] * ABS (SX)/1.34 + "PT" + S + _.fillsize[1] * ABS (SY)/1.34 + "PT"; all the problems.

The resulting diagram is as follows:

After few hours of the debug I ' ve figured out that VML implementation are missing measurement points in image tag size Definiti On.

Line number 4952Missing "PT" constant that have to is present in VML tag. So just changing

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

To something like

Fill.size = _.fillsize[0] * ABS (SX)/1.34 + "PT" + S + _.fillsize[1] * ABS (SY)/1.34 + "PT";

Conversion with some units such as pt,px

pixel?m 1 m = 3779.5275593333 Pixel

PIXEL?DM 1 dm = 377.95275593333 Pixel

pixel?cm 1 cm = 37.795275593333 Pixel

pixel?mm 1 mm = 3.7795275593333 Pixel

pixel?in 1 in = Pixel

pixel?ft 1 ft = 1152 Pixel

Pixel? Pica 1 Pica = Pixel

Pixel? point 1 point = 1.3333333333333 Pixel

Pixel? Twip 1 Pixel = Twip

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 =.

point?ft 1 ft = 864 point

Point ? Pica 1 Pica =

Point ? Twip 1 point = Twip

Raphael.js image compatibility issues under IE8