jquerysvg插件与定位

我正在一个由SVG驱动的背景上工作

我制作了一个静态svg，这样就可以微调原型的图形外观。这是图形结果

我现在正在将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>

这将使线条绝对定位到整个SVG画布（占屏幕视口的100%）

---

它不应该是相对于它的gServerLabel组的吗？或者是我做错了什么？

为什么不使用编辑器来摆脱转换并简化编码任务？

---

您可以在Inkscape中复制并粘贴到位，但还有其他菜单选项

为什么不使用编辑器来消除转换并简化编码任务？

---

您可以在Inkscape中复制并粘贴到位，但从原始SVG中还有其他菜单选项

，我可以清楚地看到您的行将如何转换为900 x 50。。。但是从您的代码中，我看不到与gServer相关的对应翻译。可能我缺少osmething.gServer是一个组元素，组元素位于CSS中。因此，我在CSS中设置了它，效果很好。从原始SVG中，我可以清楚地看到您的行将如何转换为900 x 50。。。但是从您的代码中，我看不到与gServer相关的对应翻译。可能我缺少osmething.gServer是一个组元素，组元素位于CSS中。所以我在CSS中设置了它，效果很好。对不起，我不确定我是否理解你的答案。我想您建议我在inkscape中绘制它并使用xml输出。不适合这里，因为定位将是动态的。对不起，我不确定我是否理解你的答案。我想您建议我在inkscape中绘制它并使用xml输出。此处不适用，因为定位将是动态的。

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'});
}