Question

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

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

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

Answer 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

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

1 个答案: