如何使用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无法绑定到这些元素。这个问题的答案包含一些可能对您有帮助的解决方案：How do you access the contents of an SVG file in an <img> element?。