0

以下の縦棒グラフ画像を参照してください。

ここに画像の説明を入力

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>
4

1 に答える 1

3

値が正の場合、長方形の 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);
                        }
                    }
                });
            }
        }
于 2013-06-12T12:05:29.007 に答える