IE9, IE8, SVG, VML and doctypes
I'm working on drawing shapes in my ASP.NET web app. In IE9 and other browsers, I'm doing it with SVG, and it's working great. In IE8 and below, I'm using VML. I'm finding that IE8 does not display the VML at all when it's in IE8 Standards mode (not using compatibility view).
My doctype is set to <!DOCTYPE html>. If I take the doctype away entirely, IE8 goes to quirks mode and works fine, but IE9 then goes to its quirks mode (instead of IE9 Standards) and doesn't display the SVG.
This is happening on a test page, so there's nothing there besides the form containing a div containing either the <svg> element and its children or the VML elements.
What is going on here? It seems like I shouldn't have to change the doctype for different browsers, and the reputation graph on Stack Exchange's user page appears to work the same way (VML for IE8 and below, SVG for everyone else, HTML5 doctype)...
Answer
There are a couple of more things you need to check:
Selector for the behaviour rules needs to be modified.
- When setting dimensions or position of an element, the unit does not default to px. It must be explicitly specified to work.
- You cannot create a VML element outside of the DOM:
.
var vmlFrag = document.createDocumentFragment();
vmlFrag.insertAdjacentHTML('beforeEnd',
'<v:rect id="aRect" fillcolor="red"
style="top:15px;left:20px;width:50px;height:30px;position:absolute;"></v:rect>'
);
document.body.appendChild(vmlFrag);
- The rect element won't be displayed! You cannot modify its CSS either as you will probably just crash the browser. However, there is a fix for it. Copy the outerHTML of the element into itself:
.
var aRect = document.getElementById('aRect');
aRect.outerHTML = aRect.outerHTML;