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

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

Uncaught TypeError: undefined is not a function (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 );

尽管至少有一个 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 文件中那样让它意识到它。

任何建议都会很棒，而且会欠啤酒。

Answer 1

问题 2：

我想通过命名空间属性的值来引用一个对象， 即inkscape：标签

试试

"[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>