SVG Image xlink:href is not working with knockout

Question

I am trying to render a svg image with knockout, but it is not showing image after I successfully bound the viewmodel.

Here is the SVG

<svg width="500" height="500" style="border: solid 1px black">

<image id="img1" width="500" height="500"
        data-bind="attr:{'xlink:href': image}"></image>
</svg>

Here is the knockout bindings,

<script>
    var viewModel = function(data){
        var self = this;
        self.image = ko.observable(data.image)
    };

    var data = {image: "http://2.bp.blogspot.com/-cGeVTe2XeWU/VUEiQidIJKI/AAAAAAAACwU/UYzCrcNMMAk/s1600/comic.png"};

    var vm = new viewModel(data);
    ko.applyBindings(vm);
</script>

Anyway I checked the page source after executing this code. So the SVG image element in page source is

<image id="img1" width="500" height="500" data-bind="attr:{'xlink:href': image}" xlink:href="http://2.bp.blogspot.com/-cGeVTe2XeWU/VUEiQidIJKI/AAAAAAAACwU/UYzCrcNMMAk/s1600/comic.png"></image>

As you can see here, it is setting xlink:href correctly, but it is not showing on svg.

Do I need to refresh DOM somehow? Simply how can I render SVG image using knockout?

Any help will be appreciated

score 2 · Accepted Answer · answered Nov 18 '17 at 07:20

2

xlink:href attribute needs to be there even with empty value to initialize the HTML svg image.

so image tag should be like Here is a demo and more info

  <image id="img1" width="500" height="500" xlink:href=""
        data-bind="attr:{'xlink:href': image}"></image>

answered Nov 18 '17 at 07:20

mili

3,502
1
29
29

2

Full day spent and all that needed to be done was init with an empty string. I love my job! (thanks @mili) – Eduardo La Hoz Miranda Jul 31 '19 at 13:41

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

SVG elements are not added to the DOM when you use an img element to display the image, therefore knockout.js is unable to bind to those elements. The answers to this question contain some solutions that might help you: How do you access the contents of an SVG file in an <img> element?

Note: I get this solution from Stackoverflow.

edited May 23 '17 at 12:22

Community

1
1

answered Aug 25 '15 at 07:59

Mahmoud Abd El Samea

47
7

Thanks I will try those solutions and let you know the status. thanks – mili Aug 25 '15 at 13:51

SVG Image xlink:href is not working with knockout

2 Answers2