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

By default, the origin of a transform is center.

Source-link

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

您可以使用CSS 属性 transform-origin or with 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>

请切换到整页以查看示例。

为什么 SVG 旋转不居中？

Why SVG rotation was not centered?

css

svg

rotation

css-transforms