JQuery, SVG и Visio метаданные

Question

Я пытаюсь получить доступ к некоторым пользовательским данным, отправленным в документ SVG Visio 2007. Я использовал 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». я хочу анимировать фигуру с приложенным к ней Бобом. Я попробовал следующее, но ничего не получил обратно.

$("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-элементам в SVG DOM, у меня возникают сбои. Я спрашиваю слишком много о библиотеке jquery.svg.js здесь, или я просто что-то упустил?

Я использую модифицированную версию jquery с версией 1.4.2 jquery.svg.js, работающей в Google Chrome 2.0.172.43. Сейчас я нахожусь в стадии проверки концепции, поэтому, если вы можете показать мне, как выполнить ту же задачу с использованием библиотек Raphael или ProcessingJS (или любой другой), я буду готов переключиться. JQuery-ориентированные решения мои предпочтения, хотя.

Спасибо

Эндрю Мэтьюз

Answer 1

Похоже, у вас есть как минимум две логические ошибки в вашем селекторе. Согласно вашему примеру, элемент g не является дочерним по отношению к v:cp, и, следовательно, часть > g:first в конце вашего селектора не будет сопоставлена. Также учитывая структуру вашего SVG, я не уверен, почему вам нужно :parent:parent в селекторе (плюс указание :parent более одного раза является избыточным). Тег v:cp является самозакрывающимся и не содержит дочерних элементов, поэтому psuedo :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, за которой я был, но я уверен, что этот ручной ход будет работать там, где селекторы не работали.

Спасибо за помощь.

Andrew