Raphael - 旋转整个集合而不是每个对象答案

【问题标题】：Raphael - rotate whole set not each objectRaphael - 旋转整个集合而不是每个对象
【发布时间】：2013-03-24 15:19:32
【问题描述】：

大家好，我正在尝试使用 Element.animate() 使用 Set 一次旋转几个对象，但它会旋转每个元素而不是整个集合，我需要整个集合

请帮帮我，我对 raphael 很陌生，阅读文档和尝试功能只有几个小时

            var archtype = Raphael("canvas", 600, 600);

            archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
                var alpha = 360 / total * value,
                a = (90 - alpha) * Math.PI / 180,
                x = xloc + R * Math.cos(a),
                y = yloc - R * Math.sin(a),
                path;
                if (total == value) {
                    path = [["M", xloc, yloc - R],["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]];
                } else {
                    path = [["M", xloc, yloc - R],["A", R, R, 0, +(alpha > 180), 1, x, y]];
                }
                return {
                    path: path
                };
            };

            var circleSet=archtype.set();

            var arc_red0 = archtype.path().attr({
               "stroke": "#f00",
               "stroke-width": 30,
               arc: [300, 300, 30, 360, 250]
            });
            circleSet.push(arc_red0);

            var arc_red1 = archtype.path().attr({
               "stroke": "#f00",
               "stroke-width": 30,
               arc: [300, 300, 20, 360, 250],
               "transform": "r50,300,300"
            });
            circleSet.push(arc_red1);

            var arc_red2 = archtype.path().attr({
               "stroke": "#f00",
               "stroke-width": 30,
               arc: [300, 300, 80, 360, 250],
               "transform": "r90,300,300"
            });
            circleSet.push(arc_red2);

            var arc_red3 = archtype.path().attr({
               "stroke": "#f00",
               "stroke-width": 30,
               arc: [300, 300, 60, 360, 250],
               "transform": "r190,300,300"
            });
            circleSet.push(arc_red3);

            var arc_red4 = archtype.path().attr({
               "stroke": "#f00",
               "stroke-width": 30,
               arc: [300, 300, 70, 360, 250],
               "transform": "r270,300,300"
            });
            circleSet.push(arc_red4);

            var $angle=0;

            (function (){
                circleSet.animate({transform:"r"+$angle+",300,300"},200);
                $angle++;

                init = false;
                setTimeout(arguments.callee, 60);
            })();

【问题讨论】：

标签： svg rotation raphael

【解决方案1】：

选项 1：使用 Raphael 的 sets 功能 -- 将所有元素添加到集合中，然后告诉 Raphael 旋转集合。请参阅http://raphaeljs.com/reference.html#Paper.set 了解更多信息。

这实际上不会旋转整个 Raphael 元素，但如果图像的所有元素都是集合的一部分，它看起来就像是在这样做。

选项 2：使用标准 CSS 来旋转元素或其 HTML 容器。这实际上可能是最简单的选择，但它的缺点是它无法在旧浏览器（尤其是旧版本的 IE）中运行。对此有一些变通方法（例如CSS Sandpaper），但如果您已经在使用 Raphael 来帮助 IE 兼容性，您可能也不想使用其他脚本。

【讨论】：