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

我正在尝试访问组'shape5-7'，相对于包含'Bob'的自定义属性导航到它'shape5-7'。也就是说我希望通过鲍勃附着它来塑造形状。我尝试了下面这个，但我什么都没有回来。

$("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中运行的jquery.svg.js的1.4.2版本。我现在处于概念验证阶段，所以如果你能告诉我如何使用Raphael或ProcessingJS库（或任何其他）执行相同的任务，我愿意转换。以JQuery为中心的解决方案是我的首选。

由于

Andrew Matthews

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，但我确信该手动遍历将起作用，而选择器则没有。

感谢您的帮助。

安德鲁

JQuery，SVG和Visio元数据

2 个答案: