jquery SVG插件和定位

我正在处理由SVG驱动的背景。jquery SVG插件和定位

我做了一个静态SVG，所以我可以微调我的原型的图形外观。下面是图形结果 printscreen of my svg background

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

注意怎么行元素相对于它的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组？还是有什么我做错了？

来源

2012-02-01 pixeline

from your original SVG我可以非常清楚地看到你的行将被翻译成900 x 50 ...但是从你的代码我不会没有看到与gServer相关的相应翻译。也许我错过了osmething。 – dsummersl 2012-02-01 20:09:13

gServer是一个组元素，组元素被定位在CSS中。所以我把它设置在CSS中，并且工作正常。 – pixeline 2012-02-04 23:55:03

为什么不使用编辑器来摆脱转换并使编码任务更容易？你可以在Inkscape中拷贝和粘贴可能的位置，但也有其他菜单选项

来源

2012-02-02 00:38:58 Chasbeen

对不起，我不知道我明白你的答案。我想你建议我在inkscape中绘制它并使用xml输出。这里不适合，因为定位是动态的。 – pixeline 2012-02-04 23:52:55

jquery SVG插件和定位

回答

相关问题