WinJS data-win-bind a qualified xml element attribute


  • Hi,

    I'm using an inline SVG graphic in a WinJS 8.1 app. I'd like to declaratively bind the url used by the image element inside the SVG. Obviously, the following declaration with two semi-columns for the same attribute doesn't work.



    <image xlink:href="placeholder.jpg" data-win-bind="xlink:href: datasource.myImageUrl "/>


    I tried using single quote to contain the qualified attribute, tried binding the unqualified href attribute and also tried using a dot inplace of the first semi-colon...

    Is there a way to declaratively bind the 'xlink:href' attribute with a data-win-bind declaration?

    Some help would be very appreciated.

    Wednesday, April 30, 2014 2:19 AM


  • Hi,

    I am not very familiar with this problem. But when I try the codes to bind to the xlink:href, it seems like cannot bind to it. I suggest you can use XmlElement.SetAttributeNS to set the xlink:href:

    <svg id="pigSVG" height="100%" width="100%"
             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g transform="scale(1)">
                <image x="0" y="0" height="700px" width="900px" data-win-bind="color:myImageUrl"  id="image" color="red" />
    var image = document.getElementById("image");
                    var url = "logo.scale-100.png";
                    var xlinkns = "http://www.w3.org/1999/xlink";
                    image.setAttributeNS(xlinkns, "xlink:href", url)
    Best Wishes!

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, May 01, 2014 7:19 AM