Я работаю над фоном, работающим на SVG.
Я сделал статический svg, чтобы я мог точно настроить графический внешний вид моего прототипа. Вот графический результат 
Сейчас я нахожусь в процессе преобразования моего svg-кода в плагин jquery SVG , чтобы впоследствии я мог легко анимировать элементы и добавлять некоторые взаимодействия.
Я глубоко в документации плагинов, но есть кое-что, что я не совсем понимаю: расположение дочерних элементов группы не относительно элемента группы.
Мой статический svg
<g class="user" id="user-server" transform="translate(900,50)">
<g class="label">
<text transform="matrix(1 0 0 1 1 8.4399)" class="user-name">[ you ]</text>
<line x1="1" y1="20" x2="200" y2="20" style="stroke-dasharray: 1,2; stroke: black; stroke-width: 0.2;"/>
</g>
</g>
Обратите внимание, как элемент LINE расположен относительно его элемента G.
Мой код jquery.svg
function iniSVG(svg){
var gServer = svg.group({class_: 'user', 'id_': 'user-server'});
var gServerLabel = svg.group(gServer,{class_:'label'});
var gServerText = svg.text(gServerLabel, 52, 76, '[ pixeline ]',{class_:'user-name'});
svg.line(gServerLabel,1,20,200,20, {strokeDashArray: '1,2', stroke:'black',strokeWidth:1, class_:'label-line'});
}
Это делает линию абсолютно позиционированной для всего холста SVG (что составляет 100% от области просмотра экрана).
Разве это не должно быть относительно его группы gServerLabel? Или я что-то не так делаю?