Я пытаюсь разработать интерактивную SVG-карту и не могу заставить Prototype расширять встроенные элементы SVG. Вот мой пример кода (удаленные данные пути из-за огромного):
<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="330" height="500" viewBox="-16037,-19651 28871,44234">
<g id="state_outline">
<path id="state" fill="white" stroke-width="200" d="..." />
<path id="water" fill="#a0a0ff" d="..." />
</g>
<g id="counties">
<path class="county" id="adams" d="..." />
...
</g>
</svg>
<div id="nottamap"></div>
<script type="text/javascript">
console.log($('nottamap'));
console.log($('nottamap').identify());
console.log($('counties'));
console.log($('counties').identify());
</script>
Результат выполнения:
<div id="nottamap">
nottamap
<g id="counties">
$("counties").identify is not a function
$() просто отказывается расширять переданный ему элемент, если он является частью элемента SVG. Есть ли что-то о взаимодействии прототипа с элементами XML, которые я не понимаю, или есть лучший способ для меня сделать это?