VML and IE 8

[Andrew Poulos]

Is dynamically generated VML in IE 8 broken?

If I add one simple shape to page all is well. If I try adding multiple
shapes of shapes with shadows or fills then either only the first item
appears or no item appears.

Of course the code works fine in IE 6 and 7.

All I could get from th eMS web sites is to change this:

document.namespaces.add("v", "urn:schemas-microsoft-com:vml");

to this

document.namespaces.add("v", "urn:schemas-microsoft-com:vml",
"#default#VML");

Andrew Poulos

 

[Andrew Poulos]

Is dynamically generated VML in IE 8 broken?

If I add one simple shape to page all is well. If I try adding multiple
shapes of shapes with shadows or fills then either only the first item
appears or no item appears.

Of course the code works fine in IE 6 and 7.

Since I've been editing the code to try to get it to work in IE 8 it now
doesn't work correctly in IE 6, 7 or 8.

Here's the relevant part of the latest code. Only the first shape ever
gets drawn. All calls to drawVMLShape after the first call never seem to
produce any VML.

var m, shapes = [], ss, doc = document;

shapes[0] = ["filled ellipse", "#7FFFD4", 10, 96, 308, 339, 183];
shapes[1] = ["ellipse", "#00FF00", 3, 16, 124, 234, 201];

// create xmlns
doc.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");
// setup css
ss = doc.createStyleSheet();
ss.cssText = "v\\:*{behavior:url(#default#VML)}";

function drawVMLShape(shapeType,filled) {
var filled = filled || false;

var e = doc.createElement("v:" + shapeType);
e.style.position = "absolute";
e.style.left = shapes[3] + "px";
e.style.top = shapes[4] + "px";
e.style.width = shapes[5] + "px";
e.style.height = shapes[6] + "px";

e.strokeweight = shapes[2] + "px";
e.strokecolor = shapes[1];

if (filled) {
e.fillcolor = shapes[1];
} else {
e.filled = "false";
}

return e;
}

function drawVMLLine() {
// TODO
}

for (i = 0; i < shapes.length; i++) {
switch (shapes[0]) {
case "filled rect":
m = drawVMLShape("rect", "rect", true);
case "rect":
m = drawVMLShape("rect");
break;
case "filled ellipse":
m = drawVMLShape("oval", "ellipse", true);
break;
case "ellipse":
m = drawVMLShape("oval");
break;
// more cases to add...
}

doc.body.appendChild(m);
}

There are other bugs(?) as well:
- Lines in IE 7 always get drawn at 0, 0 irrespective of the CSS applied
to it
- setting end caps to lines get ignored
- one of the pages on MSDN is believed by AVG to contain a virus trying
to do a VML overflow.

Andrew Poulos