www.webdeveloper.com
Results 1 to 3 of 3

Thread: VML not showing up in IE

  1. #1
    Join Date
    Jul 2011
    Posts
    54

    VML not showing up in IE

    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.
    Attached Images Attached Images

  2. #2
    Join Date
    Feb 2012
    Location
    youTUBE
    Posts
    234
    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>
    

  3. #3
    Join Date
    Jul 2011
    Posts
    54
    Quote Originally Posted by WyCnet View Post
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles