Chrome 中的旋转和变换原点

【问题标题】：rotate and transform-origin in ChromeChrome 中的旋转和变换原点
【发布时间】：2018-09-29 10:06:33
【问题描述】：

根据文档，如果我想围绕其中心旋转 SVG 元素，我所要做的就是在 css 文件中添加 2 行：

  transform: rotate(45deg);
  transform-origin: center;

然而，实际上，元素是围绕 SVG 的中心而不是元素的中心旋转的。我做错了什么还是预期的行为？在此处查看演示：https://codepen.io/lkaratun/pen/YLzgdG

我使用的是 Chrome 65，添加 -webkit- 前缀没有帮助。

【问题讨论】：

标签： css svg

【解决方案1】：

这是预期的。您需要设置 transform-box: fill-box 以使事情以您想要的方式工作。

您还应该注意，目前仅 Chrome 支持将 x、y、fill、height、cx、cy、r 设置为 CSS 属性而不是属性。这是一个跨浏览器的解决方案。

rect {
  fill: red;
  transform: rotate(5deg);
  transform-box: fill-box;
  transform-origin: center;
}
circle {
  fill:black;
}

<svg width="500" height="500"">
<rect width="100px" height="50px" x="50px" y="50px"/>
<circle cx="100px" cy="75px" r="5px"/>
</svg>

【讨论】：