svg и BH

Есть такой код:

{
    block: 'donut-pie',
    tag: 'svg',
    attrs: {
        width: '45px',
        height: '45px'
    }
}

Все классно отрисовывается, а в консоль кидает: Uncaught TypeError: domNode.className.match is not a function.

Если сделать так:

{
    block: 'donut-pie',
    content: {
        tag: 'svg',
        attrs: {
            width: '45px',
            height: '45px'
        }
    }
}

Так ошибки нет. Почему?

8 years ago

tadatuta

@Defite в песочнице не воспроизводится, видимо, проблема в чем-то другом.

8 years ago

Defite

Кажется, отловил ошибку. Блоку donut-pie ставлю js: true, затем добавляю клиентский js:

modules.define('donut-pie',
    ['i-bem__dom', 'jquery'],

    function (provide, BEMDOM, jQuery) {

        provide(BEMDOM.decl(this.name, {

            onSetMod: {
                js: {
                    inited: function () {

                        console.log('init');

                    }
                }
            }
        }));
    }
);

И вот после этого ошибка появляется. Если убрать скрипт или закомментить js: true, все снова в порядке.

Ну и если просто убрать tag: 'svg', все становится на свои места.

8 years ago

tadatuta

document.querySelector('body').className.match // function
document.querySelector('svg').className.match // undefined

т.к. для SVG className является не строкой, а инстансом SVGAnimatedString.

Так что если нужна JS-функциональность, стоит завернуть SVG в какую-нибудь обертку. Ну либо пропатчить места, где используется className.match и подобные (например, на classList).

8 years ago

Defite

А, понял. Я видел как оно используется в bem-components, сделаю так же.

8 years ago

Bot8

@Defite А можешь подсказать направит к решению? а то я с тем же самым столкнулся

8 years ago

Defite

@Bot8 Получилось как-то так:

{
            block: 'donut-pie',
            content: 
                {
                    tag: 'svg',
                    mix: {
                        block: 'donut-pie',
                        elem: 'svg'
                    },
                    attrs: {
                        xmlns: 'http://www.w3.org/2000/svg',
                        width: '50',
                        height: '50'
                    }
               }
}

8 years ago

Bot8

Понял. Но у меня не получится так. У меня svg блок внутри svg контейнера. Если обернуть дочерний svg блок в div, то он из контейнера вываливается. Пока извратился так

 BEMDOM.prototype._extractModVal
....
if (domNode.className instanceof SVGAnimatedString) {
    var className = domNode.className.baseVal;
} else {
    var className = domNode.className;
}

ошибка Uncaught TypeError: domNode.className.match is not a function. исчезла появилась еще хуже TypeError: b is undefined из jQuery

нужно еще думать

8 years ago

Bot8

TypeError: b is undefined

это я натупил

Чтобы оставлять комментарии, необходимо авторизоваться.