How to setup data binding to an SVG image using knockout.js?

Question

I'm trying to get a click event on a SVG to fire using knockout.js:

HTML

<img id="the-image" src="img/image.svg" data-bind="????????" />

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="100" fill="#707070" 
            width="20" 
    height="200"
    data-bind="click: $root.open" />
</svg>

this doesn't work if the SVG file is given as source for the img element, it does however work if I just paste it into the img element.

Is there a way to setup the binding so that the data-context is accessible for the SVG ?

Answer 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? .