javascript - 变换svg中的图像而不变换坐标系

Question

我是 svg 新手。我有一个想要旋转的图像。我使用旋转变换旋转了图像，并给出了我想要旋转图像的点的 Angular 和坐标。

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

有没有办法可以在不旋转原始坐标系的情况下旋转图像？如果我旋转图像，图像的 x 和 y 属性也不会更新。

Answer 1

如果将旋转后的图像放入 <g> 中元素并获取该元素的边界框(即 my_group.getBBox() )，它将包含旋转图像的尺寸。

示例 SVG(我在这里使用了矩形，但它对于图像的作用相同):

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

Demo here