Polymer (1.0) - динамическое использование xlink: href $ внутри шаблона не работает должным образом
у меня есть пользовательский колонтитул (tabfooter), который создает набор кнопок со встроенным SVG внутри (по стилю он встроен).
Я не хотел помещать полный код для всех SVG в атрибуты, поэтому я просто передаю некоторые идентификаторы, которые используются компонентом для самостоятельного определения путей.
<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>
Единственное видимое отличие состоит в том, что полимер добавляет классы к этому элементу.
Есть идеи?
thanks.Rob