时间戳

首页 > 解决方案 > 为什么 SVG 旋转没有居中？

css - 为什么 SVG 旋转没有居中？

问题描述

我有一个简单的 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/

标签： csssvgrotationcss-transforms

解决方案

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

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

源链接

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

transform-origin您可以使用 CSS 属性或 SVG属性更改旋转中心transform。在 SVGtransform属性中，我们也有默认的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>

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

推荐阅读