Показать сообщение отдельно
  #7 (permalink)  
Старый 08.05.2018, 14:20
Интересующийся
Отправить личное сообщение для Герасим Посмотреть профиль Найти все сообщения от Герасим
 
Регистрация: 22.09.2017
Сообщений: 24

Благодарю всех за идеи!
сдала так (это метод класса):
//key - уникальное название картинки в массиве SVG-фрагментов (вот такой, например'switchOn')
    //path - путь до картинки (вот такой, например './img/switchOn.svg')
    this.loadImg = function (key, path){
        //надо менять название стилей именно в CDATA так как хоть и названия 
        //стилей в элементах поменялись, но в CDATA они остались
        //1) загрузил указанный имидж
        var xmls = getSyncTextFileContent(path);
        var content = strToXML(xmls, 'image/svg+xml');//это XML-документ
        //2) получил из него svg-объект
        var svg = content.querySelector('svg');
        //Создаю массив элементов имеющих свойство class (т.е. со стилями)
        var aec = [];//массив элементов имеющих стиль
        var styles=[];//массив названий стилей
        var i = content.all.length;//кол-во элементов в XML
        //перебираю массив в поисках элементов имеющих свойство "class"
        while (i--) {
            if (content.all[i].classList.length){//у элементов имеющих аттрибут "class" classList.length не НОЛЬ
                aec.push(content.all[i]);//нашёл, добавляю в массив
                if (styles.indexOf(content.all[i].classList[0]) == -1)//если названия стиля ещё нет в массиве
                    styles.push(content.all[i].classList[0]); //добавить его туда
            }
        }
        //и так на выходе у меня:
        //  aec[] - массив элементов имеющих стили
        //  styles[] - массив названий стилей
        //Теперь возьму CDATA из SVG
        var cdata = svg.querySelector('style').childNodes[1].nodeValue;
        //И начну менять стили
        i = styles.length;
        while (i--){
            var newClassName = styles[i]+'_'+key;//новое название стиля
            //меняю название стилей у элементов
            var j = aec.length;
            while (j--){
                if (aec[j].classList[0] == styles[i])
                        aec[j].setAttribute('class', newClassName);
            }
            //меняю названия стилей в копии CDATA
            cdata = cdata.replace(styles[i],newClassName);
        }
        //устанавливаю новое значение CDATA
        svg.querySelector('style').childNodes[1].nodeValue = cdata;
        console.log(svg);
        return svg;//возвращаю модифицированный SVG-фрагмент
    }


Мои опасения:
  1. сделано опасное умозаключение что svg.querySelector('style').childNodes[1].nodeValue это CDATA... а вдруг оно будет в childNodes[2]?!
  2. в месте: //Создаю массив элементов имеющих свойство class (т.е. со стилями)
    я сделал перебор всего content.all через цикл while.
    Может быть в JS есть хитрый querySelector чтобы сразу получить массив элементов имеющих атрибут class?
Ответить с цитированием