Javascript SVG：从指定的定位点缩放组的一个元素 OK，所以我有一组四个元素旋转90度，就像我想要它们一样，围绕着四个元素中间的原点。

我想在旋转前和旋转后，从原点向外缩放左上角的方块，但我很难做到这一点

以下是我的示例（阅读：过度简化）到目前为止的进展：

小提琴的javascript：

/* create an svg drawing */
var draw = SVG('drawing')

/* draw rectangle */
var dial = draw.circle(60)
                .move(125,125)
                .fill('#0099ff')

var rect_yellow = draw.rect(50,50)
                .move(100,100)
                .fill('gold')
var rect_blue = draw.rect(50,50)
                .move(160,100)
                .fill('navy')
var rect_black = draw.rect(50,50)
                .move(160,160)
                .fill('black')
var rect_green = draw.rect(50,50)
                .move(100,160)
                .fill('green')

var blades = draw.group()
    .add(rect_yellow)
    .add(rect_blue)
    .add(rect_black)
    .add(rect_green)
    .back()

var angle = 0
var rotation = 90
var spin = document.getElementById('spin')
var spun = 0

/* make rectangle jump and change color on mouse over */
spin.addEventListener('click', function() {
    /* calculate new ending orientation for blades */
    angle += rotation
    var new_rotate = angle

    /* rotate the blade group */
    blades.animate(1000, '>')
        .rotate(new_rotate, 155, 155)

    ++spun
})

这里有一个稍微更吸引人的例子，说明我正在尝试做的事情：缩放：

---

第一个问题是能够确定在给定旋转后哪个铲刀处于左上角位置。第二个问题是伸缩本身；我已经让刀片按比例缩放，但它会变得疯狂，同时离开屏幕。我不知道如何使它从指定的原点（中心圆的中间）正确缩放。

我看到您使用的是

svg.js

。我不知道它是如何处理内部转换的。但无论如何。要缩放图元，通常使用其中心点作为参照。因此，您应该找到每个矩形的中心点，并使用该点缩放它。（我假设svg.js在内部执行所需的翻译）。

您可以使用

.after（）

函数链接动画

我不确定是否正确使用了svg.js，但我做了以下几点：

var rects = [rect_yellow, rect_green, rect_black, rect_blue];

// define the animations
var enlarge_blade = function() {
  rects[spun % 4].animate(250, '<')
                 .scale(1.25, 1.25)
                 .translate(-38,-38);
};

function spin_anim() {
  rects[spun % 4].animate(250, '>')
                 .scale(1, 1)
                 .translate(0,0)
                 .after(rotate_blades);
};

var rotate_blades = function() {
    blades.animate(1000, '>')
          .rotate(angle, 155, 155)
        .after(function() {
            ++spun;
            enlarge_blade();
            title.text('spun ' + spun + ' times');
        });
};

// Pre-enlarge the first (yellow) rect
enlarge_blade();

/* make rectangle jump and change color on mouse over */
spin.addEventListener('click', function() {
    angle += rotation
    spin_anim();
})

var rects=[rect_黄、rect_绿、rect_黑、rect_蓝]；
//定义动画
var\u刀片=功能（）{
矩形[旋转%4]。设置动画（250，，）
.比例（1,1）
.翻译（0,0）
.之后（旋转叶片）；
};
var rotate_blades=函数（）{
刀片。动画（1000，“>”）
.旋转（角度，155，155）
.在（函数（）之后{
++旋转；
放大刀片（）；
title.text（'spin'+spin+'times'）；
});
};
//预放大第一个（黄色）矩形
放大刀片（）；
/*使矩形跳跃并在鼠标悬停时更改颜色*/
spin.addEventListener（'click'，function（）{
角度+=旋转
自旋动画（）；
})

---

你为什么讨厌分号？“它们可以很可爱，即使它们经常做出悲伤的眨眼表情。”乔纳森，我从中获得的一些代码没有使用它们。我知道，我也觉得很奇怪！做得很好，谢谢！因此，为了使刀片从正确的点开始缩放，实际上需要将

translate（）

调用附加到

scale（）

调用中？我必须深入研究这个逻辑才能真正理解它，但是通过您的工作示例，这会容易得多。是的，您必须考虑转换的起源和元素。矩形的x，y点指的是左上角。所以为了保持右下角不动，你必须在缩放矩形的同时移动它。