javascript - 如何使用 knockout.js 设置数据绑定(bind)到 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 中，它就会起作用 元素。

有没有办法设置绑定(bind)，以便 SVG 可以访问数据上下文？

Answer 1

当您使用 img 元素显示图像时，不会将 SVG 元素添加到 DOM，因此 knockout.js 无法绑定(bind)到这些元素。此问题的答案包含一些可能对您有帮助的解决方案:How do you access the contents of an SVG file in an <img> element? .