@Sergey750il

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

Здравствуйте. Не работает такая конструкция:
$("[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>
  • Вопрос задан
  • 489 просмотров
Пригласить эксперта
Ответы на вопрос 2
S-ed
@S-ed
Комбайнёр
$("[*|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
Ответ написан
Комментировать
xlink:title="russia"
но
"[title=russia]"
Ничего странного не замечаете?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы