получение и использование элементов DOM из SVG
 

если вставлять весь код svg на страницу в виде <svg></svg>
то проблем с взаимодействием с js нет. но это при большом объеме элементов превращает код в не читаемый поток символов.


как можно взаимодействовать с svg вставленным по типу
<object type="image/svg+xml" data="picture.svg"></object>.
получить dom и управлять им (для анимации).

библиотеки использовать не пробовали?
http://dmitrybaranovskiy.github.io/raphael/

<object id="your_svg" type="image/svg+xml" data="picture.svg"></object>. - Добавь ID в свой объект

var svg = document.getElementById('your_svg');//получил DOM SVG
var scd = svg.contentDocument;//тут ты получил собственно SVG-DOM теперь можешь взаимодействовать через scd

спасибо!
возникла проблема с работой всего этого в хроме.
использовал такой код:

window.onload = function() {

var hud = document.getElementById("hud"),
	svgDochud = hud.getSVGDocument(),
	tween1 = svgDochud.getElementById('tween1'),
	tween2 = svgDochud.getElementById('tween2'),
	tween3 = svgDochud.getElementById('tween3'),
	tween4 = svgDochud.getElementById('tween4'),
	tween5 = svgDochud.getElementById('tween5');

TweenMax.to(tween1 , 200, {rotation:2880, transformOrigin:"50% 50%",repeat:-1});
TweenMax.to(tween2 , 300, {rotation:-720, transformOrigin:"50% 50%",repeat:-1});
TweenMax.to(tween3 , 200, {rotation:1440, transformOrigin:"50% 50%",repeat:-1});
TweenMax.to(tween4 , 400, {rotation:-720, transformOrigin:"50% 50%",repeat:-1});
TweenMax.to(tween5 , 200, {rotation:360, transformOrigin:"50% 50%",repeat:-1});
};

данный код работает во всем кроме хрома.
в хроме работает только если использовать код на сервере. у хрома оказывается запрет на локальную загрузку contentDocument.
может кому понадобится, сам долго мучался. ))