Polymer (1.0) - 在模板内动态使用 xlink:href$ 无法正常工作答案

【问题标题】：Polymer (1.0) - dynamic use xlink:href$ inside template not working properlyPolymer (1.0) - 在模板内动态使用 xlink:href$ 无法正常工作
【发布时间】：2016-01-13 19:32:06
【问题描述】：

我有一个自定义页脚栏 (tabfooter)，它创建了一组内部带有内联 SVG 的按钮（出于样式原因，它是内联的）。

我不想将所有 SVG 的完整代码放入属性中，所以我只是交出一些 id，组件使用这些 id 自行确定路径。

<custom-tabfooter values="{" ids ":["A ","B ","C ","D "]}"></custom-tabfooter>

然后该组件获取内部带有 ID 数组的对象，并使用它来重复所需的 DOM 元素：

<dom-module id="custom-tabfooter">

  <template>

    <template is="dom-repeat" items="{{values.ids}}">
      <button id$="[[addButtonID(item)]]" class$="[[addButtonClass(item)]]">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">

          <!--<use xlink:href="../assets/img/svg/A-icon.svg#path"></use>-->
          <use xlink:href$="[[replaceSVGPath(item)]]"></use>

        </svg>
      </button>
    </template>

  </template>

  <script>
    Polymer({
      is: "custom-tabfooter",
      properties: {
        values: Array
      },
      ready: function() {
        console.log(this.values.ids);
      },
      addButtonID: function(item) {
        return "btn-footer-icon-" + item;
      },
      addButtonClass: function(item) {
        return "btn-footer-icon btn-" + item;
      },
      replaceSVGPath: function(item) {
        return "../assets/img/svg/" + item + "-icon.svg#path";
      }
    });
  </script>

</dom-module>

这按预期工作。但是当涉及到 SVG 时，我感到很困惑。注释掉了一行：

<!--<use xlink:href="../assets/img/svg/A-icon.svg#path"></use>-->

这条线确实有效。虽然它只使用内部标签加载单个静态 SVG。

当我尝试加载动态 SVG 内容时，它会静默失败，因为没有抛出任何错误，也没有加载任何 SVG：

<use xlink:href$="[[replaceSVGPath(item)]]"></use>

但是输出非常相似：

<use xlink:href="../assets/img/svg/A-icon.svg#path"></use>

<use class="style-scope custom-tabfooter" xlink:href="../assets/img/svg/A-icon.svg#path"></use>

唯一明显的区别是聚合物为该元素添加了类。

谁有想法？

谢谢罗伯

【问题讨论】：

我在这里遇到了几乎相同的问题。你解决了吗？
我遇到了同样的问题并找到了“修复”-> stackoverflow.com/questions/34434881/…

标签： html dom svg polymer web-component

【解决方案1】：

这是 Polymer 的问题。 SVG 使用命名空间属性。要正确设置它们，您需要调用 setAttributeNS，但 Polymer 的属性绑定不支持命名空间，因此它们无法设置这些属性。

这是作为问题#3060 提交的。

【讨论】：

【解决方案2】：

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

 <use xlink:href="" xlink:href$="[[replaceSVGPath(item)]]"></use>

Polymer 在创建属性时遇到问题，如果它已经存在，它可以更新它就好了。

【讨论】：