Métadonnées JQuery, SVG et Visio

Question

J'essaie d'accéder à certaines données personnalisées émises dans un document SVG par Visio 2007. J'ai utilisé jquery.svg.js de Keith Wood. Malheureusement, même avec l'extension svgdom, je n'arrive pas à obtenir la forme que je veux pour l'animer.

Voici ce que le SVG ressemble:

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

J'essaie d'accéder au groupe « shape5-7 », en naviguant jusqu'à ce par rapport à la propriété personnalisée contenant « Bob ». c'est-à-dire que je veux animer la forme avec Bob attaché à celle-ci. J'ai essayé ce qui suit, mais je n'ai rien récupéré.

$("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); 

Je l'ai essayé avec et sans les préfixes d'espace de noms XML. Et je sais que la forme peut être trouvée dans le DOM SVG, puisque $("#shape5-7") trouve la bonne forme et s'anime bien. Il semble que dès que j'essaie d'accéder à des éléments non-SVG dans le DOM SVG, j'obtiens des échecs. Est-ce que je demande trop de la bibliothèque de jquery.svg.js ici, ou est-ce que je manque juste quelque chose? J'utilise la version modifiée de jquery avec la version 1.4.2 de jquery.svg.js fonctionnant dans Google Chrome 2.0.172.43. Je suis en phase de preuve de concept pour le moment, donc si vous pouvez me montrer comment faire la même tâche en utilisant les librairies Raphael ou ProcessingJS (ou tout autre), je serais prêt à changer. Les solutions JQuery-centric sont ma préférence cependant.

Merci

Matthews Andrew

Answer 1

Merci pour la réponse. Malheureusement, cela ne fonctionne pas. Voici ce que j'espérais mes sélecteurs jquery feraient:

v:cp:parent:parent fait référence à la mère du parent de v:cp (ou enfermer g)

> g:first fait référence au premier enfant du parent gg.

Pour autant que je sache, mes sélecteurs d'origine signifiait la même chose que votre exemple (si j'inclus un appel .parent() supplémentaire.

J'ai trouvé une réponse par la suite. Il anime le parent du groupe souhaité (qui, à mon cas est suffisant).

$('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); 

Je ne pouvais pas naviguer vers le bas au groupe des enfants shape5-7, que j'étais après, mais je suis confiant que ce déplacement manuel fonctionne, où les sélectionneurs ne l'ont pas

Merci pour l'aide.

Andrew

Answer 2

Il semble que vous avez au moins deux erreurs logiques dans votre sélection. Selon votre échantillon, l'élément g n'est pas un enfant de v:cp et la partie > g:first à la fin de votre sélecteur ne correspondra donc pas. Compte tenu de la structure de votre SVG, je ne suis pas sûr de savoir pourquoi vous avez besoin de :parent:parent dans le sélecteur (plus de spécifier :parent plus d'une fois est redondant). La balise v:cp se ferme automatiquement et ne contient aucun élément enfant. Par conséquent, le code :parent ne correspondra pas à cette partie. Essayez ce 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);