Это похоже на ошибку в jQuery или Sizzle.Вот урезанный тестовый пример, показывающий проблему:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>Create SVG Elements HTML</title>
</head><body>
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="200" class="face" fill="red" />
</svg>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript"><![CDATA[
console.log( document.getElementsByClassName('face').length ); // 1
console.log( document.querySelectorAll('circle.face').length ); // 1
console.log( $('circle').length ); // 1
console.log( $('.face').length ); // 0
console.log( $('circle.face').length ); // 0
console.log( $('circle[class~="face"]').length ); // 1
]]></script>
</body></html>
Результаты одинаковы для Chrome v11, Firefox v4, Safari v5 и IE9.
Проблемапохоже, что jQuery неправильно запрашивает атрибуты class для элементов в другом пространстве имен.Используя селектор «атрибут содержит слово» ~=, вы можете использовать jQuery для поиска этих элементов.
Редактировать : основная причина этого, вероятно, задокументирована в этот ответ ;Итак, проблема в том, что SVG DOM указывает, что атрибут class (как и у многих других) - это не статическое значение, доступное через className, а скорее SVGAnimatedString, который имеет свойства .baseVal и .animVal, необходимые дляполучить фактическое строковое значение класса.