为什么 SVG 旋转不居中?

Question

我有一个简单的SVG图像。有一个圆圈，我想在里面旋转90度。但正如您在 JSFiddle 示例中所看到的，旋转的中心不在中间。我做错了什么？

svg {
background-color: #ddd;
}
.circle1 {
fill: none;
stroke-width: 20px;
stroke: #b5b5b5;
}
.circle2 {
fill: #aaa;
transform: rotate(-20deg);
stroke-width: 15px;
stroke: #71c7ff;
}

<svg height="600" width="600">
<circle class="circle1" cx="300" cy="300" r="200"></circle>
<circle class="circle2" cx="300" cy="300" r="200"></circle>
</svg>

下面是 JSFiddle 示例 https://jsfiddle.net/oxt681gr/1/

Answer 1

默认情况下，转换的起源应该是0px 0px，但现在我们在 MDN 上有错误的信息：

默认情况下，变换的原点为 center。

源链接

这是错误的。但是，如果它位于圆圈的中心，您将无法看到旋转的结果，因为您将在他的中心旋转圆圈。

您可以使用 CSS 属性transform-origin或 SVGtransform属性更改旋转中心。在 SVGtransform属性中，我们在0px 0px上也有默认值。要旋转 SVG(不带 CSS(，请使用transform="rotate(deg, cx, cy)"，其中度是要旋转的度数，(cx, cy)定义旋转中心。

在我的解决方案中，您可以使用CSS和JS交互更改它：

var input = document.querySelector('input'),
circle2 = document.querySelector('.circle2'),
output = document.querySelector('span');
input.onchange = function(e)
{
var newTransformOrigin = e.target.value;
output.innerHTML = newTransformOrigin + 'px' + ' ' + newTransformOrigin + 'px';
circle2.style.transformOrigin = output.innerHTML;
};

svg {background-color:#ddd}
.circle1 {fill: none; stroke-width: 20px; stroke: #b5b5b5}
.circle2
{
fill: #aaa;
transform-origin: 0 0;
transform: rotate(-20deg);
stroke-width: 15px;
stroke: #71c7ff;
}

<p>Change transform-origin <input type="range" min="0" max="600" value="0" step="50">
<span>0px 0px</span></p>
<svg height="600" width="600">
<circle class="circle1" cx="300" cy="300" r="200"></circle>
<circle class="circle2" cx="300" cy="300" r="200"></circle>
</svg>

请更改为整页以查看示例。