在 svg 中变换图像而不变换坐标系

【问题标题】：Transform image in svg without transforming coordinate system在 svg 中变换图像而不变换坐标系
【发布时间】：2014-12-16 13:14:33
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript image svg rotation transform

【解决方案1】：

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

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

Demo here

【讨论】：