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

【问题标题】：How to setup data binding to an SVG image using knockout.js?如何使用 knockout.js 设置数据绑定到 SVG 图像？
【发布时间】：2014-05-06 18:33:05
【问题描述】：

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

【问题讨论】：

标签： javascript html knockout.js svg

【解决方案1】：

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

【讨论】：