анимировать высоту 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. Что было бы лучшим способом применить исходные высоты назад к барам, когда, например, нажал?

EDIT: Часть раствораhttp://jsfiddle.net/David_Knowles/pRTBt/12/

можно изменить атрибут высоты. Это нужно выяснить, как передать ему массив значений

Answer 1

В HTML высота и ширина CSS являются свойствами, то есть вы можете написать <div style="height:100%;height:100%">, а высота() будет равна 100%. В SVG высота и ширина являются атрибутами XML, поэтому вы пишете <rect height="100%" width="100%">

attr() получает значение атрибута, поэтому он работает.

Вы можете сохранить исходные значения в качестве пользовательских атрибутов, соглашение заключается в том, чтобы начать такие вещи с data-, а затем применить значение настраиваемого атрибута обратно к панели при нажатии.