none
Issue with SVG refresh EDGE 25.10586 on WIndows 10 and IE 11 on Windows 7 RRS feed

  • Question

  • I am writing a web based game that dynamically updates an svg control with arrows and circles. I cannot make it work on IE 11 or the latest version of Edge. It does work on all the other platforms I have tested, including Android, iOS, unix and various versions of the Mac.

    Here is an example of the javascript code for a circle:       

                sTemp = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                sTemp.classList.add("marker", "player"+(i+1));
                sTemp.setAttributeNS('http://www.w3.org/2000/svg', "player", "player"+(i+1));
                sTemp.setAttributeNS('http://www.w3.org/2000/svg', "cx", newX);
                sTemp.setAttributeNS('http://www.w3.org/2000/svg', "cy", newY);
                sTemp.setAttributeNS('http://www.w3.org/2000/svg', "r", markerRadius);
               document.getElementById("svg-bids").appendChild(sTemp);

    In order to make my updates appear I have to force a refresh of the parent container using the following trick.

    $("#svg-container").html($("#svg-container").html());

    Note that svg-container is a div and svg-bids is an svg control.

    This refresh trick works the latest versions of chrome, safari and firefox, but does not work under Edge. No error message is created, but my dynamic updates are not displayed. As a result I cannot support Microsoft browsers for my game.

    Note that I can create the components of my svg statically - ie directly within an html document - with no issue, but that doesn't help me because my game is dynamic.

    I have spent days unsuccessfully researching this. I would like to support IE / Edge. I am impressed with where Microsoft is going technologically, but I am stumped.

    Friday, April 1, 2016 8:50 PM

All replies

  • Hi,

    classList  on SVG elements is unsupported in IE11 and lower document modes. (see also caniuse.com)

    To debug your web apps, display the dev tool (f12), then select the Debug tab and choose "Break on unhandled exceptions" from the dropdown (looks like a stop sign)

    Without closing the dev tool, return to your web page and either refresh the page or start your testing to append elements to the DOM.

    When a new element is appended to the DOM, you should be able to see the DOM Explorer update with the markup of the new element. Also note the error messages that are now displayed in the Console tab of dev tools... I expect that you will be seeing similar warnings like.

    Element circle cannot be self-closing at this point.

    Post questions about html, css and scripting for web site development to

    IE Web development forum moving to stackoverflow

    If possible include with your question a link to your website (a test page posted to your web server/site) or mashup (jsfiddle.com) that shows the issue.

    Regards.

    Questions regarding Internet Explorer 8, 9 and 10 and Internet Explorer 11 for the IT Pro Audience. Topics covered are: Installation, Deployment, Configuration, Security, Group Policy, Management questions. If you are a consumer looking for answers or to raise a question, it's highly recommended you head on over to http://answers.microsoft.com/en-us


    Rob^_^

    Monday, April 4, 2016 1:35 AM