Не работает Jquery выборка в SVG карте?

Question

[Sergey750il]

Здравствуйте. Не работает такая конструкция:
$("[title=russia]").attr('id','example');
Выборка происходит из этого:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1200" height="820" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="russia" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><path fill="#ffffff" stroke="#3899e6" d="M1039.426,586.848C1038.897,587.1129999999999,1038.502,587.376,1038.2369999999999,587.5079999999999L1038.2369999999999,587.5079999999999L1038.2369999999999,587.5079999999999C1037.7099999999998,587.376,1035.86,588.3009999999999,1035.3329999999999,588.1689999999999C1034.8039999999999,588.1689999999999,1034.74.0619999999999,683.7570000000001,475.1189999999999C683.7570000000001,476.9679999999999,682.8320000000001,478.9489999999999,681.2470000000001,480.5329999999999C688.7750000000001,481.5899999999999,706.6060000000001,480.9289999999999,712.6800000000001,477.3629999999999C712.682,477.361,712.682,477.361,712.814,477.23ZM692.343,464.55H692.2099999999999C692.078,464.946,691.814,465.475,691.6819999999999,465.87C691.947,465.475,692.21,464.947,692.343,464.55Z" stroke-width="1" stroke-linejoin="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 1px; stroke-linejoin: round;"></path></a>
</svg>

Answer 1

[Мак Алексей]

$("[*|title=russia]").attr('id','example');
Но он не будет работать в IE версий до 8 включительно ( https://developer.mozilla.org/en-US/docs/Web/CSS/@... )

Для xhtml, вероятно, будет работать:
$("[xlink\\:title=russia]").attr('id','example');

Вот, что говорит на этот повод W3:

In documents comprising elements from multiple namespaces, it's possible that some elements from different namespaces share the same local name. Since this API does not natively support a namespace resolution mechanism for selectors, obtaining a list of such elements from a specific namespace, excluding all others, requires additional processing to filter the result. The following example illustrates a document containing video elements from both the SVG and XHTML namespaces.

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink">
  <video id="svgvideo1" xlink:href="myvideo.ogg" width="320" height="240"/>
  <foreignObject width="100" height="100">
    <video id="htmlvideo1" src="myvideo.ogg"
    xmlns="http://www.w3.org/1999/xhtml">No video1</video>
  </foreignObject>
</svg>

The following script demonstrates how to first select the video elements and then filter out the unwanted elements based on their namespace.

var elms = document.querySelectorAll("svg video");
var result = new Array();
var svgns = "http://www.w3.org/2000/svg"

for(var i = 0; i < elms.length; i++) {
  if(elms[i].namespaceURI == svgns) {
    result.push(elms[i]);
  }
}

www.w3.org/TR/selectors-api/#resolving-namespaces

Answer 2

[Александр Маджугин]

xlink:title="russia"
но
"[title=russia]"
Ничего странного не замечаете?

Comments

[Sergey750il]

Замечаю. В Инструментах разработчика Chrome отображается просто title, только при копировании кода к title добавляется xlink:

[Александр Маджугин]

Боюсь V8 не пользуется "Инструментами разработчика Chrome" при поиске и проверки атрибутов элементов.

[Sergey750il]

Тогда как выбрать такой элемент для добавления к нему id?

[Александр Маджугин]

"[xlink:title=russia]"
возможно ":" надо экранировать \, чо-то не помню - попробуйте "[xlink\:title=russia]" если первое не сработает

[Александр Маджугин]

Sergey750il: а вообще нормальные редакторы присваивают id ВСЕМ элементам, в конце-концов допишите его туда "руками" и выбирайте по id

[Sergey750il]

Там не все так просто. Карту делаю вот по этому руководству. ruseller.com/lessons.php?rub_id=32&id=952
В цикл вывода карты добавил obj.attr('title',paths[country].name); и он поместил все path в ссылки с атрибутом title. Когда title меняю на id то работать перестает.

[Александр Маджугин]

Sergey750il: Не надо title МЕНЯТЬ на id - добавьте id дополнительно.
Т.е. obj.attr('title',paths[country].name); и obj.attr('id',paths[country].name); если хотите такой же.
И да - выше правильно подсказывают - двумя слэшами экранируется двоеточее.

[Sergey750il]

В том то и дело, что не получается добавить id.

[Александр Маджугин]

Sergey750il: т.е.? obj.attr('id',paths[country].name); не добавляет id?
А что кстати вообще надо получить? Для чего это всё?
В конечном продукте svg будет создаваться каждый раз заново динамически или будет подгружаться из файла?

[Sergey750il]

Делаю по этому мануалу ruseller.com/lessons.php?rub_id=32&id=952 Не добавляет id к path метод, который описан выше.

[Александр Маджугин]

Sergey750il: да, я видел этот мануал. Но как-то не тянет его полностью проходить.
Вы попробовали "[xlink\\:title=russia]"?
В чем необходимость полного создания элементов с помощью js?
Гораздо проще создать svg отдельно и работать с ним. При этом создать его таким каким нужно сразу.

[Sergey750il]

Вот так получилось изменить ID.
var selector = "a[*|title=russia]";
$(selector).attr('id', 'example')

Там еще все это дело нужно интегрировать в WordPress, что бы при сдаче офисов сразу менялся цвет помещения на карте.

[Александр Маджугин]

Sergey750il: ну вот, смотрите - у вас svg исходный будет единый - значит его можно не генерить на клиенте, а загружать файлом.
Кстати менять цвет можно и через css - :hover тут прикрутить гораздо проще чем делать это через js.
Посмотрите - flamandia.ru/maps/plan
Аналогичная задача, только не офисы а участки. Посмотрите клиентскую часть и как подгружается svg.
Там же стили: flamandia.ru/maps/plan/media/css/svg.css

P.S.
Верстку и дизайн не смотрите - они ко мне никакого отношения не имеют, но я извиняюсь за прошлых разрабов.