SVG is not rendering with kendo templates in Firefox and IE

2 posts, 0 answers
  1. Siva
    Siva avatar
    1 posts
    Member since:
    May 2014

    Posted 29 May 2014 Link to this post

    Hi All,

    I want to build svg paths with kendo templates binding with MVVM view model. See this I am also attaching following images which are rendered in chrome and firefox.

    Known Issue:
    In firefox, when we inspect svg element and edit that svg tag element
    (right click and select "Edit Svg") then the svg is rendering.

    But in IE 10, no path tags are found in svg tag.

    Could you please give me the solution?
  2. T. Tsonev
    T. Tsonev avatar
    2834 posts

    Posted 02 Jun 2014 Link to this post


    Currently, the Kendo templates will be evaluated and appended to the DOM using innerHTML. This won't work reliably for SVG with the exception of Chrome which seems to handle it well.
    Other browser require the elements to be created with the correct namespace. Since the template output is a string this typically involves a DOMParser.
    The code works out to something like this:

    var parser = new DOMParser();
    var doc = parser.parseFromString(svgString, "text/xml");
    var node = document.adoptNode(doc.documentElement);
    // node can now be appended to the current document

    The bad news is that there's currently no way to extend the template rendering to use this code.
    Please, file a request over at our UserVoice portal for SVG support so other users can vote for it.

    Apologies for the caused inconvenience.

    T. Tsonev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top