JQuery, SVG and Visio metadata
I am trying to access some custom data posted in a Visio 2007 SVG document. I was using jquery.svg.js by Keith Wood. Unfortunately, even with the svgdom extension, I can't get the form I revived after it.
This is what SVG looks like:
...
<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" ...
I'm trying to access the "shape5-7" group by navigating to it relative to the custom property containing "Bob". those. i want to animate a form with beans attached to it. I tried the following but didn't get anything.
$("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);
I've tried it with and without XML namespace prefixes. And I know that the shape can be found in the SVG DOM, as it $("#shape5-7")
finds the desired shape and animates beautifully. It looks like as soon as I try to access non-SVG elements in the SVG DOM I get crashes. Am I reading too much of the jquery.svg.js library here, or am I just missing something?
I am using a modified version of jquery with jquery.svg.js version 1.4.2 running in Google Chrome 2.0.172.43. I'm at the conceptual stage at the moment, so if you can show me how to accomplish the same task using the Raphael or ProcessingJS libraries (or any others), I'd like to switch. JQuery oriented solutions are my preference though.
thank
Andrew Matthews
source to share
Thanks for the answer. Unfortunately this doesn't work. Here I was hoping my jquery selectors would do:
v:cp:parent:parent
refers to the parent of the parent v:cp
(or attached g
)
> g:first
refers to the first child of the g
parent g
.
As far as I could tell, my original selectors meant the same as your example (if I had included an extra call .parent()
.
I eventually found the answer. It animates the desired parent of the group (which is enough in my case):
$('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);
I was unable to navigate back to the child group shape5-7
after which I was, but I'm pretty sure this manual move will work where the selector didn't.
Thanks for the help.
Andrew
source to share
It looks like you have at least two boolean errors in your selector. According to your sample, the element is g
not a child v:cp
and therefore the part > g:first
at the end of your selector will not be matched. Also, given the structure of your SVG, I'm not sure why you need it :parent:parent
in the selector (plus specifying :parent
more than once is redundant). The tag v:cp
is self-closing and contains no children, so psuedo :parent
will cause this part to not match. Try this code:
$('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);
source to share