Инфографика с SVG. Отслеживание позиции курсора

[maritca]

Добрый день!
Имеется такая интерактивная картинка:
http://beton-art.ru/svgmy.html
При наведении курсора на некоторые детали фасада они подсвечиваются и вылезает окошко с описанием детали (кстати, если у кого-то не работает - напишите, пожалуйста, свою версию браузера)

Сделано по образцу: http://www.dejurka.ru/css/interactiv...ss-animations/

Окошко с описанием всегда всплывает из одного места, позиция которого определена в CSS, например:

#okna-badge {
  -webkit-transform-origin: 445px 488px;
  -moz-transform-origin: 445px 488px;
  -ms-transform-origin: 445px 488px;
  -o-transform-origin: 445px 488px;
  transform-origin: 445px 488px; 
  }

А у нас на картинке, как видно, один и тот же элемент может быть повторяющимся, то есть расположенным в любой части фасада. И как-то не эстетично получается: наводишь на элемент на крыше дома, а окно вылезает откуда-то снизу.

Как сделать так, чтобы окно с описанием вылезало из того места, где в данный момент находится мышь?

Я понимаю, как получить координаты мыши, но не знаю, как их привязать к свойству transform-origin. И нужно ли это делать для каждого id, или можно обойтись чем-то вроде [id$=badge]...

[krasovsky]

То есть ты не можешь подставить координаты курсора в transform-origin?

Я с svg не работал, но на мой взгляд, можно сделать один единственный див для описания , и с помощью css position:absolute, top,left устанавливать ему позицию.
Позицию получать из эвента mousemove например

Напиши как у тебя обрабатываются наведения на части здания - js'ом?