使用jquery動畫的svg動畫矩形

Question

請參閱下面的柱形圖圖像。

我怎樣才能在SVG矩形的動畫。對於正面價值來說，它會向上增長，而負向價值會向下增長。

1. 我想用jquery animate來做到這一點。我已經實施了一些 增加矩形的高度。它的罰款爲負值，但 正值需要開始爲原點y軸值0和 向上。但它使動畫顛倒了順序。我不知道 會發生什麼錯誤。請參閱我的代碼片段。

============================================ ============================

$(element).animate(
      { 
       y: parseFloat($(element).attr("y")), 
       height: parseFloat($(element).attr("height")) 
      }, 
      { 
       duration: 2000, 

       step: function(now, fx) { 
        if (fx.prop == "y") { 
         $(element).attr("y", -now); 
        } else 
         $(element).attr("height", now); 

       } 
      }); 






<g id="container_svg_SeriesGroup_0" transform="translate(82,463)"><defs><linearGradient id="container_svg_series_0Gradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0" stop-color="gray" stop-opacity="1"/><stop offset="0.5" stop-color="blue" stop-opacity="1"/></linearGradient></defs><rect id="container_svg_Point0" x="104.7" y="-270.72222222222223" width="44.41818181818182" height="24.61111111111111" fill="url(#container_svg_series_0Gradient)" stroke-width="1" stroke="Gray" style="display: inline-block; height: 24.6111px;" transform="scale(1,0.4)"/><rect id="container_svg_Point1" x="168.15454545454546" y="-246.1111111111111" width="44.418181818181836" height="73.83333333333333" fill="url(#container_svg_series_0Gradient)" stroke-width="1" stroke="Gray" style="display: inline-block; height: 73.8333px;"/><rect id="container_svg_Point2" x="231.6090909090909" y="-283.02777777777777" width="44.41818181818181" height="36.916666666666664" fill="url(#container_svg_series_0Gradient)" stroke-width="1" stroke="Gray" style="display: inline-block; height: 36.9167px;"/><rect id="container_svg_Point3" x="295.0636363636364" y="-406.08333333333337" width="44.41818181818172" height="159.97222222222223" fill="url(#container_svg_series_0Gradient)" stroke-width="1" stroke="Gray" style="display: inline-block; height: 159.972px;"/><rect id="container_svg_Point4" x="358.51818181818186" y="-246.11111111111111" width="44.41818181818178" height="221.5" fill="url(#container_svg_series_0Gradient)" stroke-width="1" stroke="Gray" style="display: inline-block; height: 221.5px;"/></g> 

---

Answer 1

當值爲正，你還需要更改Y矩形的位置。喜歡的東西：

step: function(now, fx) { 
    if (!isNaN(now)) { 
     $(element).attr("y", -now); 
     $(element).attr("height", now); 
    } 
} 

UPDATE：

我認爲這會爲你工作：

 var elements = $("#container_svg_SeriesGroup_0 rect"); 

     for (var e=0; e<elements.length; e++) { 
      var $element = $(elements[e]); 
      var height = parseFloat($element.attr("height")); 
      var y = parseFloat($element.attr("y")); 

      if (y < -247) { 
       $element.animate({ height: height }, 
       { 
        duration: 2000, 
        step: function(now, fx) { 
         if(!isNaN(now)) { 
          $(this).attr("y", -247-now); 
          $(this).attr("height", now); 
         } 
        } 
       }); 
      } else { 
       $element.animate({ height: height }, 
       { 
        duration: 2000, 
        step: function(now, fx) { 
         if(!isNaN(now)) { 
          $(this).attr("height", now); 
         } 
        } 
       }); 
      } 
     }