为 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());
});
});

我计划在触发eventHander 时将高度设置为零并使用jquery.animate 为高度设置动画，但由于返回的高度问题似乎无法做到。

问题：

1. 为什么.height() 返回零？
2. 例如，在单击时将原始高度应用回条形的最佳方法是什么？

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

可以编辑高度属性。这需要弄清楚如何将值数组传递给它

Answer 1

在 HTML 中 height 和 width 是 CSS 属性，即你可以写 <div style="height:100%;height:100%"> 然后 height() 将是 100%。在 SVG 中，高度和宽度是 XML 属性，所以你写 <rect height="100%" width="100%">

attr() 获取属性值，这就是它起作用的原因。

您可以将原始值存储为自定义属性，惯例是以data- 开头，然后在单击时将自定义属性值应用回栏。