Knockout 的 HTML 绑定 + SVG

Question

我正在使用 Knockout 通过将字符串传递到使用 html: 绑定的 SVG 数据绑定来呈现动态 SVG。在 Chrome 中，这非常有效。在 Firefox 中，它会正确设置 DOM（即我可以看到子 svg 元素存在于 firebug 中），但图形本身不会显示。

我做了一个小提琴：https://jsfiddle.net/4eTJL/1/，但有趣的是，Firefox 的行为显示在小提琴中的两个浏览器中。

Answer 1

<svg> 标签没有innerHTML 属性，这就是ko html 绑定不起作用的原因，但是您可以通过将所有svg 内容放入logo 变量中，然后将其绑定到标准html 标签来避免此问题.

https://jsfiddle.net/4eTJL/2/

<div data-bind="html: logo"></div>

var vm = {
    logo: '<svg viewBox="0 0 50 50" class="center-block" xmlns="http://www.w3.org/2000/svg" width="80" height="80" data-bind="xml: logo"><rect ry="8" rx="8" id="svg_2" height="50" width="50" y="0" x="0" stroke-width="5" fill="#bfbfbf"></rect><text font-family="Graduate" textLength="40" lengthAdjust="spacingAndGlyphs" text-anchor="middle" x="25" y="37" font-size="33" fill="crimson" stroke="black" stroke-width="1.25">NO</text></svg>'
};

ko.applyBindings(vm);