0

Столкнулся с проблемой, что когда динамически добавлять svg спрайт то он не показывается, то есть svg и внутренний тег use видны в консоли, а вот в use не отображается #shadow-root, как это можно поправить? Скрипт у меня создает выпадающий лист, если в Li есть еще список то ему добавлять стрелку с svg

html:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="arrowRight" viewBox="0 0 240.823 240.823">
                        <path d="M183.189,111.816L74.892,3.555c-4.752-4.74-12.451-4.74-17.215,0c-4.752,4.74-4.752,12.439,0,17.179
                            l99.707,99.671l-99.695,99.671c-4.752,4.74-4.752,12.439,0,17.191c4.752,4.74,12.463,4.74,17.215,0l108.297-108.261
                            C187.881,124.315,187.881,116.495,183.189,111.816z"/>
                    </symbol>
</svg>

js:

function menu() {
        var elemUl = document.querySelectorAll(".sr-filter__options li > ul"),
            elemTag = document.querySelectorAll(".sr-filter__options li > span");

        for (var i = 0; elemUl.length > i; i++) {
            elemUl[i].parentNode.classList.add("collapsed");

            var arrowSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            var svgTag = document.createElementNS("http://www.w3.org/2000/svg", "use");
            svgTag.setAttribute("xlink:href", "#arrowRight");
            arrowSvg.appendChild(svgTag);
            arrowSvg.classList.add("sr-filter__options-arrow");
            elemUl[i].parentNode.querySelector("span").appendChild(arrowSvg);
        }

        for (var j = 0; elemTag.length > j; j++) {
            elemTag[j].onclick = function() {
                var elemHasClass = this.parentNode.classList.contains("collapsed"),
                    elemHasUl = this.parentNode.getElementsByTagName('ul').length > 0;
                if (elemHasUl) {
                    if (elemHasClass) {
                        this.parentNode.classList.remove("collapsed");
                        this.parentNode.classList.add("expanded");
                    } else {
                        this.parentNode.classList.add("collapsed");
                        this.parentNode.classList.remove("expanded");
                    }
                    return false;
                } else {
                    var elemOpen = this.parentNode.parentNode.querySelectorAll(".expanded");
                    for (var k = 0; elemOpen.length > k; k++) {
                        elemOpen[k].classList.remove("expanded");
                        elemOpen[k].classList.add("collapsed");
                    }
                }
            };
        }
    }
    menu();

html:
<ul class="sr-filter__options"></ul>
4
  • 1
    Поменяйте все createElement, связанные с svg, на document.createElementNS('http://www.w3.org/2000/svg', имя-элемента-здесь)
    – andreymal
    19 дек 2017 в 18:38
  • Добавил document.createElementNS - в консоли видно #shadow-root, но иконка не подгружаеться
    – dmitriy
    19 дек 2017 в 18:48
  • Зачем все это сделать в js? Ваше меню создает php? Там и с разу добавляйте svg нужным элементам. 19 дек 2017 в 19:11
  • это создаеться через сайт билдер, пользователь сам накидывает себе меню, поэтому нужно js
    – dmitriy
    19 дек 2017 в 19:14

1 ответ 1

0

Нужно заменить

svgTag.setAttribute("xlink:href", "#arrowRight");

на

svgTag.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#arrowRight");

тогда иконка станет подгружаться.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.