聚合物（1.0） - 动态使用xlink：href $里面的模板不能正常工作 [英] Polymer (1.0) - dynamic use xlink:href$ inside template not working properly

问题描述

我有一个自定义页脚条（ tabfooter ），它创建了一组带有内联SVG的按钮（由于其内联的样式）。

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

 < custom-tabfooter values ={ids：[A ，B，C，D]}>< / custom-tabfooter> 
  

组件然后使用ID数组的对象，并使用它来重复DOM元素需要：

 < dom-module id =custom-tabfooter> 
 
< template> 
 
< template is =dom-repeatitems ={{values.ids}}> 
< button id $ =[[addButtonID（item）]]class $ =[[addButtonClass（item）]]> 
< svg version =1.1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkx = 0pxy =0pxwidth =512pxheight =512pxviewBox =0 0 512 512enable-background =new 0 0 512 512xml：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）{
 returnbtn-footer-icon-+ item; 
}，
 addButtonClass：function（item）{
 returnbtn-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 xlink：href =../ assets / img / svg / A-icon.svg＃path>< / use> 
 
< use class =style-scope custom-tabfooterxlink：href =../ assets / img / svg / A-icon.svg＃path>< / use> 
  

唯一可见的区别是聚合物为该元素添加类。

任何一个想法？

thanks.Rob

解决方案

解决方法是静态添加属性，除了绑定

 < use xlink：href =的xlink：HREF $ = [[replaceSVGPath（项目）]] >< /使用> 
  

聚合物有创建属性的问题，如果它已经存在，它可以更新它。 >

i have a custom footer-bar (tabfooter) that creates a set of buttons with inline SVG inside of it (for styling reasons its inline).

I didnt want to put the complete code for all SVG into the attributes, so i just hand over some ids, which are used by the component to determine the paths on its own.

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

The component then takes the object with the ID array inside and uses it for repeating the DOM elements that are needed:

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

This works as intended. But when it comes to the SVG i get confused. There is one line commented out:

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

This line actually works. Though its only loading a single static SVG by using the internal tag.

When i try to load dynamic SVG content, it fails silently as no errors are thrown nor any SVG has loaded:

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

The output however is pretty similar:

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

The only visible difference is that polymer adds classes to that element.

Anyone an idea?

thanks.Rob

解决方案

A workaround is to add the attribute statically in addition to the binding

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

Polymer has issues creating the attribute, if it already exists it can update it just fine.

这篇关于聚合物（1.0） - 动态使用xlink：href $里面的模板不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！