动画的SVG图形栏高度

Question

问题：

我试图动画的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高度，但似乎不能够因为返回的高度问题。

问题：

1. 为什么.height()返回零？
2. 什么是将原始高度应用于酒吧的最佳方式，例如，点击举例？

编辑：部分解决方案http://jsfiddle.net/David_Knowles/pRTBt/12/

它可以编辑height属性。这需要弄清楚如何通过它的值的数组

Answer 1

在HTML高度和宽度是CSS属性，即你可能会写<div style="height:100%;height:100%">和高度（）将是100％。在SVG中，高度和宽度都是XML属性，所以你写了<rect height="100%" width="100%">

attr（）获取属性值，所以这就是它的工作原理。

您可以将原始值存储为自定义属性，约定是使用data-开始这样的操作，然后在单击时将自定义属性值应用回该栏。