javascript - Knockout 的 HTML 绑定(bind) + SVG

Question

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

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

Answer 1

<svg>标签没有innerHTML属性(property)，这就是为什么ko html绑定(bind)不起作用，但您可以通过将所有 svg 内容放入 logo 来避免此问题变量，然后将其绑定(bind)到标准 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);