Javascript 如何使用knockout.js设置与SVG图像的数据绑定？

我正在尝试使用knockout.js在

SVG

上获取一个单击事件：

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>

如果将

SVG

文件作为

img

元素的源文件提供，则此项不起作用，但是如果我只是将其粘贴到

img

元素中，则它确实起作用

---

是否有一种方法可以设置绑定，使数据上下文可供

SVG

访问？

当您使用img元素显示图像时，SVG元素不会添加到DOM中，因此knockout.js无法绑定到这些元素。此问题的答案包含一些可能对您有所帮助的解决方案：