svg围绕自身中心点旋转

要让SVG元素围绕自身中心点旋转，可以使用CSS3的transform属性或SVG的transform属性。其中，CSS3的transform-origin属性可以设置旋转的中心点。例如，将一个矩形元素旋转45度并围绕自身中心点旋转，可以使用以下代码：

rect {
  transform: rotate(45deg);
  transform-origin: center;
}

而在SVG中，可以使用transform属性的rotate函数来实现旋转，并使用cx和cy属性来设置旋转中心点的坐标。例如，将一个矩形元素围绕自身中心点旋转45度，可以使用以下代码：

<rect x="50" y="50" width="100" height="50" fill="yellow" transform="rotate(45 100 75)" />

其中，rotate函数的第一个参数是旋转的角度，第二个参数是旋转中心点的x坐标，第三个参数是旋转中心点的y坐标。

相关问题

矩形 svg图像 围绕某个点旋转后 计算旋转后的四个顶点坐标

假设矩形的中心点坐标为 (cx, cy)，长为 w，宽为 h，旋转角度为 angle，那么旋转后四个顶点的坐标可以通过以下公式计算：

// 将角度转换为弧度
const radians = angle * Math.PI / 180;

// 计算矩形四个顶点相对于中心点的偏移量
const x1 = -w / 2;
const y1 = -h / 2;
const x2 = w / 2;
const y2 = -h / 2;
const x3 = w / 2;
const y3 = h / 2;
const x4 = -w / 2;
const y4 = h / 2;

// 计算旋转后的四个顶点坐标
const cos = Math.cos(radians);
const sin = Math.sin(radians);
const x1r = cx + x1 * cos - y1 * sin;
const y1r = cy + x1 * sin + y1 * cos;
const x2r = cx + x2 * cos - y2 * sin;
const y2r = cy + x2 * sin + y2 * cos;
const x3r = cx + x3 * cos - y3 * sin;
const y3r = cy + x3 * sin + y3 * cos;
const x4r = cx + x4 * cos - y4 * sin;
const y4r = cy + x4 * sin + y4 * cos;

其中 x1, y1, x2, y2, x3, y3, x4, y4 分别为矩形四个顶点相对于中心点的偏移量，x1r, y1r, x2r, y2r, x3r, y3r, x4r, y4r 分别为旋转后的四个顶点的坐标。注意，在计算旋转后的坐标时，需要先将角度转换为弧度，并使用 Math.cos 和 Math.sin 函数计算旋转后的 x 和 y 坐标。

svg transform

在SVG（可缩放矢量图形）中，`transform`属性用于对SVG元素进行变换操作，包括平移、缩放、旋转和倾斜等。

`transform`属性可以在SVG元素的标签内或通过CSS样式表进行设置。以下是一些常见的`transform`值和用法示例：

1. 平移（Translate）：
- `translate(x, y)`：将元素沿着 x 和 y 轴平移指定的距离。
- 示例：`<rect transform="translate(50, 50)" />`

2. 缩放（Scale）：
- `scale(x, y)`：将元素沿着 x 和 y 轴缩放指定的比例。
- 示例：`<circle transform="scale(2, 2)" />`

3. 旋转（Rotate）：
- `rotate(angle, cx, cy)`：将元素围绕指定的中心点(cx, cy)旋转指定的角度。
- 示例：`<path transform="rotate(45, 100, 100)" />`

4. 倾斜（Skew）：
- `skewX(angle)`：沿着 x 轴倾斜元素指定的角度。
- `skewY(angle)`：沿着 y 轴倾斜元素指定的角度。
- 示例：`<g transform="skewX(30)" />`

这只是一些常见的`transform`属性值和用法示例，实际上还有其他更多的变换操作可以通过`transform`属性来实现。可以根据具体需求使用不同的变换操作来调整SVG元素的形状、位置和样式。

希望这能帮助到你！