Inspired by Emil’s emulation of the canvas tag in IE, I put together a simple SVG emulation behavior for IE. As with Emil’s code, I am making use of Internet Explorer’s VML support. The behavior will walk the SVG element structure and attempt to convert to appropriate VML elements. It’s far from complete, but it does a decent job. Supported features include:
- Basic shapes: rect, ellipse, circle, polyline, polygon and path.
- Simple fills commands (in attributes and CSS): fill and fill-opacity.
- Simple stroke commands (in attributes and CSS): stroke, stroke-width, stroke-opacity and stroke-linejoin.
The behavior works on Inline-SVG, not standalone SVG files. Currently, the behavior only works on static SVG. You can’t use Javascript to interact with the SVG. Javascript can only access the VML elements. I plan to add support for and gradients (although this could be hard). I also want to eventually add support for scripting by adding SVG-like methods to the VML elements. You’ll notice that the SVG elements are in an explicit svg namespace. This seems to be a requirement for the behavior to work, but I am trying to remove the need.
Required files: iesvg.htc, iesvg.js
Sample files: iesvg_test.htm (IE), iesvg_test.xhtml (Firefox)
The sample files are exactly the same, only the extensions are different. Firefox must have Inline-SVG in an XHTML file. There is probably a way I can get Apache to trick Firefox into thinking the HTML file is an XHTML file (or get IE to think the XHTML file is an HTML file), but I haven’t got it working yet.
Update: Core files have been updated. Test files have gradient examples.
Good work.
This line will cause a serialization and another parsing pass:
// swap the SVG element contents with eh new VML
element.outerHTML = oVmlRoot.outerHTML;
You can do this more efficiently using
elemen.parentNode.replaceChild(oVmlroot, element)
same goes for all the places you use outerHYML with insertAdjacentHTML and innerHTML
Erik,
Thanks for making look at this again.
My first drafts did use ‘replaceChild’ and ‘appendChild’ in the appropiate places. For some reason the end tags of the appended child elements were placed outside of the DIV container. But now it seems to work just fine.
I think the problem had to do with the way I declared my HTC. I was using ‘literalcontent=true’ in the PUBLIC:COMPONENT element (took it from an MS example). I had removed it because it was unnecessary. Now the DOM methods work fine.
This will make it easier to add methods to the VML elements so they look like SVG elements when scripting.
You rock; good job. Thanks for making this.
Best,
Brad Neuberg
Stunning work so far! Please continue!