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

Question

我正在尝试使用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可以访问数据上下文？

Answer 1

当您使用img元素显示图像时，SVG元素不会添加到DOM，因此knockout.js无法绑定到这些元素。 这个问题的答案包含一些可能对您有帮助的解决方案： 如何在<img>元素中访问SVG文件的内容？ 。