jquery SVG 插件和定位

Question

我正在开发由 SVG 提供支持的背景。

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

我现在正在将我的 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 Canvas (即 100% 的屏幕视口(viewport))。

它不应该与其 gServerLabel 组相关吗？还是我做错了什么？

Answer 1

为什么不使用编辑器来摆脱转换并使编码任务变得更容易？您可以在 Inkscape 中复制并粘贴到可能的位置，但还有其他菜单选项