VML not showing up in IE

**DaveRich** · 03-26-2012 12:01 PM

So I have created a page which uses a "map interface" made out of SVG.

Unfortunately, this UI has to be made compatible with IE8. I have looked up several solutions to this including Raphael and SVGWeb, but I feel the best solution is to use some conditional HTML formatting here.

I am using a static background image with CSS and then using SVG/javascript to shade in different regions and mark cities on the map. However as you can see from the picture attached, in IE nothing shows up on this image, as IE <9 doesn't support SVG.

The reason for this is it allows me to "add in" IE8 functionality without having to modify the current existing functionality.

Here is my code:

HTML Code:

<html xmlns:v="urn:schemas-microsoft-com:vml">
...
<div id = "map">
     <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <circle class="city" id="Winnipeg" cx="272" cy="376" r="4" onclick="setCity('Winnipeg');" />
          ...
          <!--[if gte IE 7]>
               <v:oval style='width:100pt;height:75pt;z-index:1' fillcolor="red"> </v:oval>	
          <![endif]-->
</div>
...     
</html>

However, in the IE error dialog nothing shows up, but no red dot is shown on the map either.

Does anyone have any suggestions for the best way to make SVG code compatible with IE?

The downside is at the moment I do not have server access to install packages like SVGWeb, I can only edit the web files themselves via a CMS.

**WyCnet** · 03-26-2012 04:38 PM

You are missing the style:

Code:

 
<style>
v\:* { behavior: url(#default#VML); }
</style>

but, aren't the points too big?

Code:

<v:oval style='width:100pt;height:75pt;z-index:1' fillcolor="red"> </v:oval>

**DaveRich** · 03-28-2012 11:25 AM

Originally Posted by WyCnet

You are missing the style:
but, aren't the points too big?

Code:

<v:oval style='width:100pt;height:75pt;z-index:1' fillcolor="red"> </v:oval>

Thanks! I'll add the style and try it out,

And I just wanted to put a single dot in the div just to see the VML work.

Thread: VML not showing up in IE

Thread Tools

Display

VML not showing up in IE

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions