如何使用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文件的內容？ 。