svg 使用 jquery animate 动画矩形

Question

请参考下面的柱形图图片。

如何在 svg 矩形中制作动画。对于正值，它将向上增长，对于负值，它将向下增长。

1. 我想用 jquery animate 来做这件事。我已经实现了一些东西 增加矩形的高度。它对负值很好，但对 正值需要从原点 y 轴值 0 开始，然后继续 向上。但它动画相反的顺序。我不知道发生了什么 错误的。请参考我的代码 sn-p。

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

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

更新：

我认为这对你有用：

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