使用SVGTransform.setRotate旋转正方形时形状失真如何解决？

问题 #

尝试使用SVGTransform.setRotate绕中心旋转正方形元素#sample时，该元素形状出现失真。点击「show degrees」按钮可计算并输出#sample的当前旋转角度；点击「rotate by 15°」按钮尝试将其绕中心旋转15°后，形状不再是正方形，且输出角度未按预期增加15°。

2022年8月26日更新：问题似乎与形状本身有关，使用其他形状或将#sample嵌套在另一个g元素中旋转则正常。

现咨询如何正确使用SVGTransform.setRotate，使#sample保持正方形形状。

解决方案 #

核心问题 #

直接对正方形元素调用setRotate时，若未指定正确旋转中心，变换会以SVG原点(0,0)为基准叠加元素位置偏移，导致形状拉伸；同时多次追加旋转变换会造成矩阵累积，引发角度计算偏差。

两种可行修复方案 #

方案一：用<g>容器包裹目标元素（推荐）

将正方形嵌套在<g>容器内，旋转容器而非直接旋转正方形，隔离变换逻辑避免干扰元素自身属性：

<!-- 调整后DOM结构 -->
<g id="rotation-wrapper">
  <rect id="sample" x="50" y="50" width="100" height="100" fill="#4285F4"/>
</g>

// 旋转容器的逻辑
const wrapper = document.getElementById('rotation-wrapper');
const transformList = wrapper.transform.baseVal;
let rotateTransform;

// 复用已有旋转变换，避免矩阵累积
for (let i = 0; i < transformList.length; i++) {
  const transform = transformList.getItem(i);
  if (transform.type === SVGTransform.SVG_TRANSFORM_ROTATE) {
    rotateTransform = transform;
    break;
  }
}

if (!rotateTransform) {
  rotateTransform = wrapper.ownerSVGElement.createSVGTransform();
  transformList.appendItem(rotateTransform);
}

// 获取容器中心（等同于正方形中心）
const bbox = wrapper.getBBox();
const centerX = bbox.x + bbox.width / 2;
const centerY = bbox.y + bbox.height / 2;

// 累加15度旋转，指定中心
rotateTransform.setRotate(rotateTransform.angle + 15, centerX, centerY);

方案二：直接旋转元素时指定正确旋转中心

若不想修改DOM结构，需每次旋转时精准计算元素实际中心坐标，传入setRotate并复用同一个旋转变换项：

const square = document.getElementById('sample');
const transformList = square.transform.baseVal;
let rotateTransform;

// 查找已有旋转变换
for (let i = 0; i < transformList.length; i++) {
  const t = transformList.getItem(i);
  if (t.type === SVGTransform.SVG_TRANSFORM_ROTATE) {
    rotateTransform = t;
    break;
  }
}

if (!rotateTransform) {
  rotateTransform = square.ownerSVGElement.createSVGTransform();
  transformList.appendItem(rotateTransform);
}

// 计算正方形自身的中心坐标
const bbox = square.getBBox();
const centerX = bbox.x + bbox.width / 2;
const centerY = bbox.y + bbox.height / 2;

// 执行旋转，累加角度并指定中心
rotateTransform.setRotate(rotateTransform.angle + 15, centerX, centerY);

关键注意事项 #

• 必须复用已有旋转变换项，禁止每次旋转新增变换，否则矩阵多次相乘会导致形状扭曲、角度计算错误。
• setRotate的后两个参数是旋转中心的绝对坐标，需基于元素实际位置计算，不能使用相对值。

内容的提问来源于stack exchange，提问作者Lain