Inline SVG in MSIE
inline SVG flag demo
Same source works on MSIE 7.0/with Silverlight on WinXP, Firefox 184.108.40.206 on Ubuntu, and Opera 9.20 also on Ubuntu.
It took a while to peel away the layers in this quickstart to get to the core. createMySilverlightControl calls a
createObjectfunction with a large number of parameters.
createobjectis defined here, and copies the bulk of the parameters to a new
slPluginHelperobject and then calls
buildHTMLwith that object.
buildHTMLbuilds a string using those parameteters, which is ultimately inserted into the (global!)
parentElement.innerHTML. If you don’t need all the parameters, everything reduces down to the following:
var embed = document.createElement('embed'); embed.type = "application/ag-plugin"; embed.source = '...'; embed.width = svg.width; embed.height = svg.height; parentElement.innerHTML = embed.outerHTML;
Simply creating the
embedelement and appending it as a child doesn’t cause it to be executed, it must be converted to a string and assigned to an
innerHTMLattribute. This is a recurring theme, as the way to create Silverlight objects is via CreateFromXaml.
I figure that instead of creating a large number of small objects via
CreateFromXaml, one might as well do it all at once, and the nifty
scriptelement does the trick:
var script = document.createElement('script'); script.type = 'text/xaml'; script.id = '...'; script.text = canvas; parentElement.parentNode.insertBefore(script, parentElement);
It turns out that IE flattens all the data from the inline SVG element. There are separate sibling
/SVGelements, with all the intervening nodes placed in between these two. One can even detect empty tags, so all the necessary information is in place to reconstitute the tree. One minor issue that needs to be worked around: not only don’t these nodes have any children, they produce errors if you try to add children. This means that all parent nodes must be replaced with new objects which are capable of having children.
Finding Silverlight equivalents of all the SVG objects looks to be the most straightforward but time consuming (given the number of objects in question) part of this effort. At this point, there is only a very modest beginning... one element and two attributes.
Eventually enough namespace support will also need to be added in order to recognize xlink attributes.