Raphael.js image compatibility issues under IE8

Raphael.js the VML used to draw the graphic 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, SVG is used to draw graphics. But 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 also have the same performance, such as dislocation, The true point coordinates are not equal.

Workaround:

VML image size is not the problem because the IE browser to fill the size of the unit is not clear, view Mrocsoft document know fill using the unit PT, rather than PX, image units We get is generally pixel is px.

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

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

The result 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