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插件和定位

回答

相關問題