javascript - 修改svg xlink :href through knockout attr binding

Question

我可以通过 javascript 和 jquery 修改 xlink:href 就好了，但是通过 knockout attr 绑定(bind)只修改 dom 的 xlink:href不工作。

这是我的 svg 定义

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
<defs>
    <symbol id="icon-home" viewBox="0 0 32 32">
        <path class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
    </symbol>
</defs>

这个插在body的顶部

然后在我的 View 模型上使用带有 html 和属性 icon 的 knockout

<svg class="svg-icon">
    <use id="myuse" data-bind="attr: {'xlink:href': icon }"></use>
</svg>

我确定图标正确返回，因为我得到了以下渲染输出

<svg class="svg-icon">
    <use data-bind="attr: {'xlink:href': icon }" xlink:href="#icon-home"></use>
</svg>

这是正确的，但没有任何显示。有没有人有一个有效的 knockout 解决方案？

Answer 1

作为it seems , SVG 不会随着 DOM 的修改而更新。

所以基本上您需要做的是删除 SVG，更新字段，然后再次添加 SVG 标记。

这可以用 if 绑定(bind)来模拟:

<!-- ko if: showSvg -->
<svg class="svg-icon">
    <use data-bind="attr: {'xlink:href': icon }"></use>
</svg>
<!-- /ko -->

当 showSvg 变为 false 时，您的 SVG 将从 DOM 中删除，并在变为 true 时再次添加。

你会这样做:

myModel.showSvg(false);
myModel.icon("whatever");
myModel.showSvg(true);

或更多 ko 兼容，使用 writeable computed封装此行为:

myModel.iconComp = ko.computed({
    read: myModel.icon,
    write: function (value) {
        myModel.showSvg(false);
        myModel.icon(value);
        myModel.showSvg(true);
    },
    owner: this
});

并在您的标记中使用 iconComp 而不是 icon。

更新

好吧，忘记我说的一切......

如果您首先定义您的属性，它会起作用(用最后的 Chrome 和 IE 测试):

<svg class="svg-icon">
    <use data-bind="attr:{ 'xlink:href': icon }" xlink:href=''></use>
    <!-- Add the attr you want to bind to, set it blank like this for example-->
</svg>

然后进行正常的绑定(bind)。

Demo