svg анимация прямоугольника с помощью jquery animate

Пожалуйста, обратитесь к изображению гистограммы ниже.

введите здесь описание изображения

как я могу сделать анимацию в прямоугольнике 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>

svg jquery jquery-animate jquery-svg
person SivaRajini    schedule 12.06.2013    source источник
comment
raphaeljs.com/reference.html#Element.transform   -  person writeToBhuwan    schedule 12.06.2013
comment
я не хочу использовать пользовательский плагин. я хочу использовать только jquery.animate   -  person SivaRajini    schedule 12.06.2013

Ответы (1)


arrow_upward
3
arrow_downward

Когда значение положительное, вам также нужно изменить положение прямоугольника по оси 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);
                        }
                    }
                });
            }
        }
person Peter Collingridge    schedule 12.06.2013
comment
Спасибо за ответ. но в вашем коде показано максимальное значение. В вашем описании вы упомянули о значении y. Не могли бы вы уточнить? - person SivaRajini; 12.06.2013
comment
Я думал, ты используешь div. Если вы используете прямоугольники, используйте y вместо top. - person Peter Collingridge; 12.06.2013
comment
ось y css позиция сверху или снизу - person r043v; 12.06.2013
comment
Благодарю. но теперь прямоугольник не отображается после использования вашего кода, почему? из-за изменения значения прямоугольника y. пожалуйста, посмотрите мой обновленный фрагмент кода - person SivaRajini; 12.06.2013
comment
Проблема может заключаться в том, что SVG не допускает отрицательной высоты. Будет проще, если вы покажете мне SVG, который вы используете. - person Peter Collingridge; 12.06.2013
comment
Хорошо, я думаю, проблема в том, что ваша 0-я строка находится не в y=0, а в y=217. Если вы измените код на $(element).attr("y", 217-now);, это может сработать. - person Peter Collingridge; 12.06.2013