svg的polygon怎么旋转

SVG (Scalable Vector Graphics) 的 polygon 元素可以使用 `transform` 属性来进行旋转。要在 SVG 中旋转一个 polygon，你需要在 `<polygon>` 标签内添加一个 `transform` 属性，并设置其值为 `rotate(x-angle,y-axis-center,x-origin)`，其中：

- `x-angle`: 需要旋转的角度，单位通常是度数。
- `y-axis-center`: 旋转中心点相对于图形左上角的 y 轴坐标。如果你想让旋转中心在元素的几何中心，可以设置为 `height / 2` 和 `width / 2`，分别对应宽度和高度的一半。
- `x-origin`: 旋转中心点相对于图形左上角的 x 轴坐标。通常设为 `0` 表示从左上角开始旋转。

例如，如果你有一个 id 为 "myPolygon" 的 polygon 并想顺时针旋转45度，中心在几何中心旋转，你会这样写：

<polygon id="myPolygon" points="...your_polygon_points..." transform="rotate(45,50,50)">

这里 `50` 是假设你的 polygon 宽度和高度都是100px，所以中心位于50px的位置。

相关问题

vue svg polygon 画一个平方的六边形

在Vue项目中使用SVG来绘制一个正六边形，可以通过`<svg>`标签和`<polygon>`标签来实现。`<polygon>`标签用于创建包含三个或更多点的闭合图形。要画一个正六边形，你需要定义六个顶点。

以下是一个简单的例子，展示了如何在Vue组件中创建一个正六边形：

<template>
  <div id="app">
    <svg width="200px" height="200px" viewBox="0 0 200 200">
      <polygon
        :points="hexagonPoints"
        fill="#ccc"
        stroke="black"
        stroke-width="2"
      />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Hexagon',
  computed: {
    hexagonPoints() {
      const sideLength = 50; // 正六边形每边的长度
      const centerX = 100; // 正六边形中心点的X坐标
      const centerY = 100; // 正六边形中心点的Y坐标
      const points = [];

      // 计算六个顶点的坐标
      for (let i = 0; i < 6; i++) {
        const angle = (i * 60 + 30) * (Math.PI / 180); // 将角度转换为弧度
        points.push(`${centerX + sideLength * Math.cos(angle)},${centerY + sideLength * Math.sin(angle)}`);
      }
      return points.join(' ');
    }
  }
}
</script>

在这个例子中，我们定义了一个计算属性`hexagonPoints`来动态计算六个顶点的坐标。`viewBox`属性定义了SVG视窗的大小，而`<polygon>`标签的`points`属性则是用来定义六边形各个顶点的坐标。

svg 中 polygon 标签用法

在 SVG 中，polygon 标签用于创建多边形图形。它需要一个 points 属性，该属性定义了多边形的顶点坐标。points 属性的值是一组以逗号分隔的坐标对，每个坐标对表示一个顶点的 x 和 y 坐标。例如：

<svg>
  <polygon points="100,50 200,50 150,150" />
</svg>

这将创建一个三角形，其中顶点分别位于 (100,50)、(200,50) 和 (150,150)。

polygon 标签还可以包含其他属性，例如 fill、stroke、stroke-width 等。这些属性可以用来设置多边形的填充颜色、描边颜色和宽度等。例如：

<svg>
  <polygon points="100,50 200,50 150,150" fill="red" stroke="black" stroke-width="2" />
</svg>

这将创建一个填充为红色、描边为黑色、宽度为 2 像素的三角形。