javascript - 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 namespace 前缀。而且我知道可以在 SVG DOM 中找到该形状，因为 $("#shape5-7") 可以找到正确的形状并很好地制作动画。看起来我一尝试访问 SVG DOM 中的非 SVG 元素就会失败。我在这里对 jquery.svg.js 库的要求太多了，还是我只是遗漏了什么？

我在谷歌浏览器 2.0.172.43 中使用 jquery 的修改版本和 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);