locked
Using templates in SVG

    Question

  • In an HTML5/JavaScript app, I would like to use the WinJS Template functionality with SVG elements but when I call Template.render() it creates an element in a <div> where I would like it to create an SVG <g> instead.  Is this possible?

    <svg style="display:none">
        <g id="Template" data-win-control="WinJS.Binding.Template">
            <rect width="260px" height="100px"/>
            <text data-win-bind="innerText:date"/>
        </g>
    </svg>
    


    Thanks,

    Michael 


    Michael S. Scherotter Principal Architect Evangelist Microsoft Corporation http://blogs.msdn.com/synergist http://twitter.com/synergist http://facebook.com/synergist
    Thursday, September 22, 2011 9:00 PM

Answers

  • Hey Michael,

     

    I would file this as a bug since it seems like we should replicate whatever the root element of your template is when creating the cloned copy. As a workaround you should be able to create the container manually:

    var container = document.createElement("g");
    template.render(dataContext, container);
    

    Cheers,

    -Jeff

     

    Friday, September 23, 2011 7:54 PM

All replies

  • Thanks, Michael. That may be an issue in the WinJS template implementation. Can you file a bug on the Connect site [1]? Thanks!

    [1] http://connect.microsoft.com/VisualStudio

     

    Friday, September 23, 2011 7:49 PM
  • Hey Michael,

     

    I would file this as a bug since it seems like we should replicate whatever the root element of your template is when creating the cloned copy. As a workaround you should be able to create the container manually:

    var container = document.createElement("g");
    template.render(dataContext, container);
    

    Cheers,

    -Jeff

     

    Friday, September 23, 2011 7:54 PM