jquery SVG插件和定位

Question

我正在研究由SVG提供支持的背景。

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

我现在正在将我的svg代码转换为jquery SVG plugin，以便稍后我可以轻松地为元素添加动画并添加一些交互。

我深入了解插件文档，但有一些我不太了解：组的子元素的定位与组元素无关。

我的静态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组相关吗？或者有什么我做错了吗？

Answer 1

为什么不使用编辑器来摆脱变换并使编码任务更容易？ 您可以在可能执行此操作的Inkscape中进行复制和粘贴，但还有其他菜单选项