Question

我可以通过javascript和jquery修改xlink:href，但通过敲除xlink:href绑定修改dom的attr不起作用。

这是我的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>

这是插入身体的顶部

然后在我的视图模型上使用带有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>

哪个是正确的，但没有任何显示。是否有人通过淘汰赛获得了解决方案？

Answer 1

作为it seems，SVG不会更新DOM的修改。

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

这可以使用if绑定进行模拟：

<!-- 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 compliance ，使用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>

然后进行正常绑定。

Demo

Answer 2

转到，关于SVG的第一个假设不会更新DOM修改并不完全正确。我有一个完整的SVG Web应用程序，使用knockout构建，我们有从路径到圆圈的任何内容以及绑定到View Models的图像。这些图形在新浏览器（例如最新版本的Chrome和Firefox）中没有任何问题都会发生变化。在我们的例子中，我们并不太关心IE的旧版本，因此我们在这方面没有做足够的测试。

但这主要是浏览器引擎问题，而不是“SVG”技术。不同的引擎很可能会有不同的反应。

你的最终编辑是正确的。你需要在那里有属性，但我建议添加一个占位符值。我用的是：

<image data-bind="attr:{'xlink:href':icon.href,x:icon.x,y:icon.y,icon.height,width:icon.width}" xlink:href="whitedot.png"></image>

我创建了whitedot.png作为1x1像素白点，最初出现直到绑定发生。这可能是一个好主意，可以将其留空，以避免在您的实际图像被加载之前，有时会在Firefox或Chrome中看到缺少替换图标的图像。

通过knockout attr绑定修改svg xlink：href

2 个答案:

更新

Demo