JQuery、SVG 和 Visio 元数据

Question

我正在尝试访问一些由 Visio 2007 发送到 SVG 文档中的自定义数据。我使用了 Keith Wood 的 jquery.svg.js。不幸的是，即使使用 svgdom 扩展，我也无法获得我想要的形状来制作动画。

这是 SVG 的样子：

...
<g id="group4-6" transform="translate(30.7955,-30.7955)" v:mID="4" v:groupContext="group" v:layerMember="0;1">
<v:custProps>
    <v:cp id="helloWorld" v:nameU="AgentName" v:lbl="AgentName" v:type="0" v:langID="3081" v:val="VT4(Bob)"/>
</v:custProps>
<v:userDefs>
    <v:ud v:nameU="Show" v:val="VT0(1):5"/>
</v:userDefs>
<title>Sheet.4</title>
<g id="shape5-7" ...

我正在尝试通过相对于包含“Bob”的自定义属性导航到组“shape5-7”来访问它。即我想为带有 Bob 的形状设置动画。我尝试了以下方法，但没有得到任何回报。

$("v:cp[v:val*=Bob]:parent:parent > g:first", desk)
    .each(function(i, item) { Log('found something'); })
        .animate({ svgFill: 'red' }, 2000)
        .animate({ svgFill: 'white' }, 2000);

我已经尝试过使用和不使用 XML 命名空间前缀。而且我知道可以在 SVG DOM 中找到该形状，因为 $("#shape5-7") 找到了正确的形状并且动画效果很好。看起来一旦我尝试访问 SVG DOM 中的非 SVG 元素，我就会失败。我在这里对 jquery.svg.js 库的要求太多了，还是我只是遗漏了一些东西？

我正在使用 jquery 的修改版本和在 Google Chrome 2.0.172.43 中运行的 1.4.2 版本的 jquery.svg.js。我目前处于概念验证阶段，所以如果你能告诉我如何使用 Raphael 或 ProcessingJS 库（或任何其他库）来完成相同的任务，我愿意切换。不过，以 JQuery 为中心的解决方案是我的首选。

谢谢

安德鲁·马修斯

Answer 1

您的选择器中似乎至少有两个逻辑错误。根据您的示例，元素 g 不是 v:cp 的子元素，因此选择器末尾的 > g:first 部分将不匹配。另外考虑到 SVG 的结构，我不确定为什么在选择器中需要 :parent:parent（加上多次指定 :parent 是多余的）。标签v:cp 是自动关闭的并且不包含子元素，因此伪:parent 将导致这部分也不匹配。试试这个代码：

$('v:cp[v:val*=Bob]', desk)
    .parent()
    .nextAll('g:first')
    .each(function(i, item) { Log('found something'); })
    .animate({ svgFill: 'red' }, 2000)
    .animate({ svgFill: 'white' }, 2000);

Answer 2

感谢您的回复。不幸的是，这不起作用。这就是我希望我的 jquery 选择器能做的事情：

v:cp:parent:parent指v:cp的父级的父级（或封闭的g）

> g:first 指父 g 的第一个 g 子代。

据我所知，我最初的选择器与您的示例的含义相同（如果我包含一个额外的 .parent() 调用。

我终于找到了答案。它为所需组的父级设置动画（在我的情况下就足够了）：

$('cp', desk)
    .filter(function(index) {
        return $(this).attr("v:val") == "VT4(Bob)";
    })
    .parent()
    .parent()
    .each(function(i, item) { Log('found something'); })
    .animate({ svgFill: 'red' }, 2000)
    .animate({ svgFill: 'white' }, 2000);

我无法向下导航回我所追求的子组 shape5-7，但我相信手动遍历会起作用，而选择器没有。

感谢您的帮助。

安德鲁