Rotation of div containing html5 elemets (e.g. SVG, canvas) in ie9 doesn't show div properly

views:

answers:

+1 Q:

Rotation of div containing html5 elemets (e.g. SVG, canvas) in ie9 doesn't show div properly

I've tried using the filter attribute to rotate a div, this works well until the div is comprised of an SVG element, which results in a rotated div with the SVG not being shown (with the exception of images).

e.g. style="filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000,M22=0.86602540,sizingMethod='auto expand');"

Am I doing something wrong, or doesn't IE9 support this mix?

Thanks in advance, Oren

p.s. in case you were wondering why do I prefer to rotate the containing div, the answer is that the div contains more than just the SVG, e.g. inputs.

According to www.devsource.com, Ted Johnson (founder of Visio and partner program manager for Internet Explorer) stated:

IE9 will not support SVG fonts, declarable animation or filter effects

I'll mark this as the correct answer when permitted, since this won't change for some time (please let me know if I should do otherwise).

shex 2010-10-17 13:20:50

svg filter effects !== microsoft proprietary filter effects like those mentioned here: http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx This is, in your case, a good thing, because it means that what you are trying to do might actually still work, because it's inconclusive whether these proprietary filter effects will be supported in IE9. I don't have a Win7 box, so I won't be able to test this myself, unfortunately, but I would recommend trying some of the examples at the linked-to page to see to what level MS filter effects might be supported in IE9.

echo-flow 2010-10-17 17:06:08

Another thing you can try is using a div with an SVG element, and inside of the SVG element use a foreignObject element, and inside of that put the div and all of the stuff you wish to rotate. This is a way to apply SVG transformations to HTML content, and you see this technique being applied a lot in demos.

echo-flow 2010-10-17 17:09:11

Thanks! regarding foreignObject, it doesn't work on ie9's beta, and according to http://schmerg.com/svg-support-in-ie9-close-but-should-try-harde won't be supported.

shex 2010-10-20 10:26:19

ansaurus

tags:

views:

answers:

Rotation of div containing html5 elemets (e.g. SVG, canvas) in ie9 doesn't show div properly

related questions