jQuery +命名空间属性问题中的SVG元素动画化

Question

我正在尝试在加载了jQuery SVG的jQuery中的SVG中对形状进行一些基本的动画处理。

问题一：

每当我尝试为标准元素设置动画时，控制台都会引发错误：

码：

// 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);
}

这会在控制台中引发以下错误：

未捕获的TypeError：未定义不是函数（jquery.svganim.js：250）

看起来jQuery接受了animate调用，并将其正确传递到jQuery SVG的动画脚本，但是失败了。 仍然不确定为什么。

问题2：

我想通过命名空间属性（即inkscape：label）的值引用对象。 我过去在CSS上遇到过这个问题，方法是在CSS文件的顶部添加@namespace标签，并通过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 );

尽管至少有一个与foo匹配的SVG path元素，但这始终是控制台的输出：

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文件中一样使它知道。

任何建议都太棒了，还欠啤酒。

Answer 1

问题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>