Анимация элементов SVG в jQuery + проблемы с атрибутами пространства имен

Я пытаюсь сделать некоторые базовые анимации фигур в SVG в jQuery, загруженные с помощью jQuery SVG.

Проблема 1:

Каждый раз, когда я пытаюсь анимировать стандартный элемент, моя консоль выдает ошибку:

Код:

// Load the map - this works fine!
var svgNode = $(divSelector).svg('get');
svgNode.clear();
svgNode.load(mapPath, {
    addTo: false,
    changeSize: true,
    onLoad: resizeSvg  // This is a function elsewhere that resizes the SVG to fill or fit within the container, using a viewbox.
});

// Try to animate all path objects
var objSelector = 'path';
// Got to add svgNode.root() to the selector, or jQuery doesn't know where to look.
if( $($(objSelector), svgNode.root()).length > 0 ) {
    $($(objSelector), svgNode.root() ).animate({
        'svgFill': 'lightblue'
    }, 2000);
}

Это вызывает следующую ошибку в консоли:

Uncaught TypeError: undefined не является функцией (jquery.svganim.js:250)

Похоже, что jQuery принимает вызов анимации и правильно передает его сценарию анимации jQuery SVG, но это не удается. Все еще не уверен, почему.

Проблема 2:

Я хочу сослаться на объект по значению атрибута пространства имен, а именно inkscape:label. У меня были проблемы с этим в прошлом с CSS, которые были решены путем добавления тега @namespace в начало файла CSS и ссылки на ключи атрибутов с помощью inkscape|label, однако у jQuery SVG, похоже, есть свои проблемы с поиском объектов :

var svgNode = $(divSelector).svg('get');
var labelVal = 'foo';
var objSelector = '[inkscape\|label=\"' + labelVal + '\"]';
console.log("Selector String: '" + objSelector + "'");
console.log("Objects matched: " + $($(objSelector), svgNode.root()).length );

Несмотря на наличие по крайней мере одного элемента пути SVG, который соответствует foo, это всегда вывод консоли:

Selector String: '[inkscape\|label="foo"]'
Objects matched: 0

Я пробовал различные способы написания селектора, включая (но не ограничиваясь):

inkscape:label
inkscape|label
inkscape\\:label
inkscape\\|label
inkscape\\\:label
inkscape\\\|label

Но ничего не работает. Кто-то выдает ошибки, кто-то нет, но все равно находит 0 объектов. Те же сообщения журнала консоли, использующие только path в качестве селектора, правильно идентифицируют 42 элемента в файле.

Я могу только предположить, что у jQuery SVG есть проблемы с именем атрибута в пространстве имен, но я не уверен, как сообщить об этом так же, как в моем файле CSS.

Любые предложения были бы фантастическими, и пиво было бы причитается.


javascript svg jquery jquery-animate jquery-svg
person Rohaq    schedule 16.04.2015    source источник
comment
Вы нашли решение с этим? У меня такая же проблема, и я не могу найти решение :(   -  person Sergio    schedule 27.06.2018
comment
К сожалению, я не помню, делал ли это - это было 3 года назад, над проектом для компании, в которой я больше не работаю :(   -  person Rohaq    schedule 27.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Проблема 2:

Я хочу сослаться на объект по значению атрибута пространства имен, а именно inkscape:label

Пытаться

"[inkscape\\:label=" + labelVal + "]"

var labelVal = "abc";
$("[inkscape\\:label=" + labelVal + "]").text("abc");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div inkscape:label="abc"></div>

person guest271314    schedule 16.04.2015
comment
Да, это уже пробовал; ваш пример работает только с jQuery, но jQuery SVG, похоже, не хочет с ним работать :( - person Rohaq; 20.04.2015