[英]Polymer (1.0) - dynamic use xlink:href$ inside template not working properly
我有一个自定义的页脚栏( 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>
唯一可见的区别是聚合物为该元素添加了类别。
有人知道吗?
谢谢。罗布
解决方法是在绑定之外静态添加属性
<use xlink:href="" xlink:href$="[[replaceSVGPath(item)]]"></use>
Polymer在创建属性时遇到问题,如果该属性已经存在,则可以对其进行更新。
这是聚合物的问题。 SVG使用命名空间属性。 要正确设置它们,您需要调用setAttributeNS
,但是Polymer的属性绑定不支持名称空间,因此它们无法设置这些属性。
这作为问题#3060提交。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.