動畫的SVG圖形欄高度

我試圖動畫的SVG圖形欄的高度：http://jsfiddle.net/David_Knowles/pRTBt/我的問題

部分原因是.height()回報0，但.attr("height")返回真高度。

$(function(){ 
var $theBars = $("#v-bars").children(); 
var BarsHeight = $theBars.each(function(index, element) { 
    var origHeight = $(this).attr("height"); 
    console.log(index + ": " + $(this).attr("height")); 
    console.log(index + ": " + $(this).height()); 
}); 
});

我打算高度設定爲零，並使用動畫時jquery.animate是eventHander的triggerd高度，但似乎不能夠因爲返回的高度問題。

問題：

爲什麼.height()返回零？
什麼是將原始高度應用於酒吧的最佳方式，例如，點擊舉例？

編輯：部分解決方案http://jsfiddle.net/David_Knowles/pRTBt/12/

它可以編輯height屬性。這需要弄清楚如何通過它的值的數組

來源

2013-05-20 Timidfriendly

在HTML高度和寬度是CSS屬性，即你可能會寫<div style="height:100%;height:100%">和高度（）將是100％。在SVG中，高度和寬度都是XML屬性，所以你寫了<rect height="100%" width="100%">

attr（）獲取屬性值，所以這就是它的工作原理。

您可以將原始值存儲爲自定義屬性，約定是使用data-開始這樣的操作，然後在單擊時將自定義屬性值應用回該欄。

來源

2013-05-20 15:18:58

Thx！我會看看這種方法。所以XML元素沒有高度或寬度屬性！而且他們只尊重高度或寬度屬性！ – Timidfriendly

SVG的創建者決定寬度/高度是屬性，HTML的創建者是爲CSS樣式創建的。它並沒有真正與XML連接。 –

動畫的SVG圖形欄高度

回答

相關問題