我有一个自定义页脚栏 (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>
唯一可见的区别是 polymer 向该元素添加了类。
有什么想法吗?
谢谢罗布
最佳答案
解决方法是在绑定(bind)之外静态添加属性
<use xlink:href="" xlink:href$="[[replaceSVGPath(item)]]"></use>
Polymer 在创建属性时出现问题,如果它已经存在,它可以更新它就好了。
关于html - Polymer (1.0) - 动态使用 xlink :href$ inside template not working properly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33146886/