在不变换坐标系的情况下在svg中变换图像

Question

我不熟悉svg。我有一个图像，我想旋转。我已经使用旋转变换旋转了图像，并给了它一个角度和我想要旋转图像的点的坐标。

我的要求是，当我在旋转后拖动图像时，我想检查左上角是否在边界区域内。这在旋转之前起作用。但在旋转后，似乎在将此变换应用于图像后，我的坐标系也以相同的角度旋转。这给我带来了一些问题。

有没有办法在不旋转原始坐标系的情况下旋转图像？此外，若旋转图像，图像的x和y属性也不会更新。

Answer 1

如果将旋转后的图像放入<代码>

示例SVG（我在这里使用了rect，但它对图像的工作方式相同）：

<svg with="200" height="200">
    <g id="my_group">
        <rect id="my_rect" x="50" y="50" width="100" height="100"
              transform="rotate(45 100 100)"/>
    </g>
</svg>

JS:

var rect=document.getElementById("my_rect");
console.log("rect=",my_rect.getBBox());
// prints {x: 50, y: 50, width: 100, height: 100}

var group=document.getElementById("my_group");
console.log("group=",my_group.getBBox());
// prints {x: 29.28932, y: 29.28932, width: 141.42135, height: 141.42135 }

演示在这里