javascript - Polymer dom-repeat 中的 SVG 标签

Question

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

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

这是bug还是我的误会？

Answer 1

我之前遇到过完全相同的问题并最终使用了 iron-iconset-svg ( https://elements.polymer-project.org/elements/iron-icons?active=iron-iconset-svg )，在我看来它提供了一个更清洁/更简单的解决方案。它只是你的 SVG Sprite 表的包装器，所以你可以用几乎相同的方式定义你的图标并将它们与 iron-icon 一起使用。

定义自定义图标集(将其直接放入页面或将其包装在元素内+设置描述图标的名称，此处:'your-iconset-name')

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

如果你把它们包装起来，比如在“你的自定义图标集”中，你可以像这样包含图标集:

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

使用图标

当你需要一个图标时，你只需包含 iron-icons ( https://elements.polymer-project.org/elements/iron-icons ) 并像这样放置它:

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

然后你可以给它一个类来应用样式，不需要为它的颜色使用“填充”，只需使用“颜色”。

应用于您的示例:

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