通过敲除 attr 绑定修改 svg xlink:href答案

【问题标题】：Modify svg xlink:href through knockout attr binding通过敲除 attr 绑定修改 svg xlink:href
【发布时间】：2014-07-28 14:49:10
【问题描述】：

我可以通过 javascript 和 jquery 修改 xlink:href 就好了，但是通过敲除 attr 绑定只修改 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>

这是插入到正文的顶部

然后在我的视图模型上使用带有 html 和属性 icon 的敲除

<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>

这是正确的，但没有任何显示。有没有人可以通过淘汰赛解决这个问题？

【问题讨论】：

也许这个帖子会帮助stackoverflow.com/questions/3642035/…

标签： javascript knockout.js svg attr xlink

【解决方案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兼容，使用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

【讨论】：

我在 JSFiddle 中创建了一个示例，我相信它正在按照您所说的进行操作，但仍然没有成功。如果有人能帮我找到一个工作小提琴，那就太好了。jsfiddle.net/joeyavant/8taCQ
嗯，使用带有 svg4everyone 的外部 svg 文件，这似乎不起作用
@Sam 你试过在我的回答的更新标题之前写的解决方案吗？
@GôTô 我有，但恐怕无济于事。可能是我做错了什么，但经过大量试验和错误后，我决定使用内部 svg，它的工作方式就像一个魅力和更少的麻烦，反正它是一个 SPA。
@Sam 只要您有解决方案，那就太好了。那是很久以前的事了，老实说我几乎不记得了:)

【解决方案2】：

转到，您关于 SVG 不会因 DOM 修改而更新的第一个假设并不完全正确。我有一个用淘汰赛构建的整个 SVG Web 应用程序，我们有任何东西，从路径到圆圈和绑定到视图模型的图像。这些图形在新浏览器（例如最新版本的 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 中看到图像丢失替换图标。

【讨论】：