Question

我使用dom-repeat迭代对象，并希望在每次迭代时从SVG精灵表中引用不同的图标。要添加图标，我尝试使用<use xlink:href="sprite.svg#id">方法，与Polymer的计算绑定混合使用。这是dom-repeat块中的代码：

<template is='dom-repeat' items="{{currentPlan.functionalities}}">
  <div class="resourceRow rowParent">
     <div class="functionIconContainer columnParent">
        <svg><use xlink:href$="{{ _getIconURL(item.id) }}"/></svg>
      </div>
  </div>
</template>

＆安培; JS逻辑：

_getIconURL: function(iconID){
  var url = "sprite.svg#" + iconID;
  return url;
}

此代码输出我想要的内容，据我在Dev Tools中可以看到，但图标仍然没有显示出来。作为参考，这里是写入DOM的一个例子：

<svg class="style-scope">
   <use class="style-scope" xlink:href="sprite.svg#id"/>
</svg>

这是一个错误还是我的误解？

Answer 1

之前我遇到了完全相同的问题并最终使用了iron-iconset-svg（https://elements.polymer-project.org/elements/iron-icons?active=iron-iconset-svg），我认为这提供了更清晰/更简单的解决方案。它只是你的SVG精灵表的包装，所以你几乎以相同的方式定义你的图标，并使用铁图标。

定义自定义图标集（将其直接放入页面或将其包装在元素中+设置描述图标的名称，此处：＆＃39; your-iconset-name＆＃39; ）

<iron-iconset-svg name="your-iconset-name" size="24">
  <svg>
    <defs>
      <g id="your-icon-name">
        <rect x="12" y="0" width="12" height="24" />
        <circle cx="12" cy="12" r="12" />
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

如果你把它们包起来，让我们说你的自定义图标集＆＃39;，你可以包含这样的图标集：

<your-custom-iconset></your-custom-iconset>

使用图标

当您需要一个图标时，您只需添加铁图标（https://elements.polymer-project.org/elements/iron-icons）并将其放置如下：

<iron-icon icon="your-iconset-name:your-icon-name"></iron-icon>

然后，您可以给它一个类来应用样式，而不需要使用＆＃39; fill＆＃39;因为它的颜色，只需使用颜色＆＃39;。

应用于您的示例：

<template is='dom-repeat' items="{{currentPlan.functionalities}}">
  <div class="resourceRow rowParent">
     <div class="functionIconContainer columnParent">
        <iron-icon icon$="your-iconset-name:{{item.id}}"></iron-icon>
     </div>
  </div>
</template>

Answer 2

好的，不确定这是否真的算作答案，但它解决了我当前的问题。我已经将一个on-dom-change事件处理程序附加到dom-repeat块，它会被调用，DOM会发生变化。然后我遍历每个图标容器并将其innerHTML设置为自身。我不知道它做了什么，但它以某种方式强制重新评估DOM的那一部分，导致我的图标出现。这是最简单的代码：

_forceRedraw: function(){
 var functionIcons = document.querySelectorAll('div.functionIconContainer');
  _.each(functionIcons, function(iconContainer){
    iconContainer.innerHTML = iconContainer.innerHTML;
  })
}

＆＃39;罗，它有效！

Answer 3

解决方法是除了绑定

之外还静态添加属性

<svg><use xlink:href="" xlink:href$="{{ _getIconURL(item.id) }}"/></svg>

Polymer在创建属性方面存在问题，但更新它的工作正常。

Answer 4

这是：Polymer (1.0) - dynamic use xlink:href$ inside template not working properly

的副本

这是一个聚合物错误，提交为问题#3060。

Polymer dom-repeat中的SVG <use>标签

4 个答案: