Svg旋转和调整大小问题

Question

我在 SVG 中工作，我被困在一个场景中，所以我需要一些快速帮助。这是小提琴中的工作演示

http://jsfiddle.net/5ekCa/

问题 我沿其中心以某个角度旋转了一个矩形，效果很好。然后我缩短矩形的宽度并再次旋转它。这一次它几乎没有错误旋转。我发现这是因为矩形的新中心点。我如何解决这个问题？矩形必须沿其新中心点旋转。

代码：

var rotate_rect = document.getElementById('rotate_rect');
var rectangle = document.getElementById('rectangle');
var angle = 0;

function calculateCenterXY(node) {
    var x = node.getBBox().x + (node.getBBox().width / 2);
    var y = node.getBBox().y + (node.getBBox().height / 2);

    var xy_co = {
        x: x,
        y: y
    };

    return xy_co;

}

function rotateMainRect() {

    var centxy = calculateCenterXY(rectangle);
    angle += 5;
    rotate_rect.setAttributeNS(null, 'transform', 'rotate(' + angle + ',' + centxy.x + ',' + centxy.y + ')');


}

function decreaseRectsize() {
    var newRectWidth = 50;
    rectangle.setAttribute('width', newRectWidth);
}

function RestoreRectsize() {
    var newRectWidth = 100;
    rectangle.setAttribute('width', newRectWidth);
}

HTML

<table>
    <tr>
        <td>
            <svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="300">
                <g id="rotate_rect">
                    <rect id="rectangle" x="50" y="100" width="100" height="50" stroke="black" stroke-width="1" fill="black" />
                </g>
            </svg>
        </td>
        <td style="vertical-align: top">
            <button onclick="rotateMainRect()">Rotate +5 Angle</button>
        </td>
        <td style="vertical-align: top">
            <button onclick="decreaseRectsize()">Decrease Rect Size</button>
            <br/>
            <button onclick="RestoreRectsize()">Restore Rect Size</button>
        </td>
    </tr>
</table>

*注意：- 在小提琴中，在测试之前将 Js 加载选项更改为“无包裹体”

Answer 1

小矩形的中心与大矩形的位置不同。小矩形实际上是大矩形的左半部分，因为您只是在更改宽度。调整矩形大小时，还需要重新定位它们，使它们的中心重合。

function decreaseRectsize() {
    var newRectWidth = 50;
    rectangle.setAttribute('width', newRectWidth);
    rectangle.setAttribute('x', 75);
}

function RestoreRectsize() {
    var newRectWidth = 100;
    rectangle.setAttribute('width', newRectWidth);
    rectangle.setAttribute('x', 50);
}