动画SVG图形条的高度

时间:2013-05-20 14:35:50

标签: javascript html css svg jquery-animate

问题:

我正在尝试设置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将高度设置为零并为高度设置动画,但由于返回的高度问题,似乎无法设置。

问题:

  1. 为什么.height()返回零?
  2. 例如,单击时,将原始高度应用于条形图的最佳方法是什么?
  3. 编辑:部分解决方案 http://jsfiddle.net/David_Knowles/pRTBt/12/

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

1 个答案:

答案 0 :(得分:2)

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

attr()获取属性值,这就是它工作的原因。

您可以将原始值存储为自定义属性,惯例是使用data-启动此类操作,然后在单击时将自定义属性值应用回栏。