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

【问题标题】：SVG <use> tags within Polymer dom-repeatPolymer dom-repeat 中的 SVG <use> 标签
【发布时间】：2016-03-23 08:47:38
【问题描述】：

我正在使用 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;
}

据我在开发工具中看到的，此代码输出我想要的内容，但图标仍然没有显示。作为参考，以下是写入 DOM 的示例：

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

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

【问题讨论】：

如果您手动（静态）将 HTML 添加到 DOM 是否有效？现在它看起来与 Polymer 无关。图标在哪里定义？
如果我在 dom-repeat 中静态输入 1 个图标（所以 <use xlink:href="sprite.svg#icon1"/>），它会按预期显示。
这只是特定浏览器还是几个浏览器？
我目前已经测试过 Chrome 和 Safari
看起来像 stackoverflow.com/questions/33146886 的副本。 stackoverflow.com/questions/28474161 也可能是相关的，但似乎只发生在 FF 中

标签： javascript dom svg polymer

【解决方案1】：

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

然后你可以给它一个类来应用样式并且不需要使用'fill'作为它的颜色，只需使用'color'。

应用于您的示例：

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

【讨论】：

【解决方案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;
  })
}

'看，它有效！

【讨论】：

【解决方案3】：

一种解决方法是在绑定之外静态添加属性

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

Polymer 在创建属性时遇到问题，但更新它可以正常工作。

【讨论】：

【解决方案4】：

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

这是一个 Polymer 错误，提交为问题 #3060。

【讨论】：