4

我可以通过 javascript 和 jquery 进行修改,但通过敲除绑定xlink:href仅修改 dom 是行不通的。xlink:hrefattr

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

这是插入在身体的顶部

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

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

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

4

2 回答 2

17

看起来,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 标准,使用可写计算来封装此行为:

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>

然后进行正常绑定。

演示

于 2014-07-28T15:15:12.070 回答
0

转到,您关于 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 中看到图像丢失替换图标。

于 2015-04-28T04:54:07.617 回答