Question

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

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

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

我正在使用Chrome 65，addind -webkit-前缀没有帮助。

Answer 1

预计。您需要设置transform-box：fill-box以便按照您想要的方式工作。

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

＆＃13;

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

＆＃13;

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

＆＃13;