为什么 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 上有错误的信息：

默认情况下，变换的原点是中心。

Source-link

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

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

请切换到整页查看示例。