SVG 在旋转时移动位置

Question

最近几天我一直在摆弄一架纯正的 CSS 手风琴。本质上我不知道我在做什么，但是我发现了一些将我推向正确方向的例子。我现在开始工作了。差不多吧！

在您进一步阅读之前，我创建了一个 codepen。我认为能够检查我正在谈论的代码可能会有所帮助。你知道的，我正在努力帮助你帮助我......

手风琴有一个圆形的 SVG 元素，我将其包裹在 <label> 标签中，用于展开和折叠手风琴。单击 SVG（或实际上是标签）时，将检查 radio 输入，然后启动 transform: rotate(45deg); SVG 的动画。它还会触发行的扩展。还有一些更多的技巧涉及每行中的第二个 radio 输入，以便能够使用 SVG 再次折叠该行。

我认为（希望）您刚刚阅读的这些细节与我的实际问题无关！但也许他们是这样的，所以我想提供一些背景信息。无论如何，当我在文档中不正确地摆弄它时，它似乎是 the effect I want:

<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body>
  ...
<body>

但是一旦我添加这些动画就改变了，现在，除了旋转之外，SVG 也稍微 移动位置 （如果我没记错的话向下和向右).所以这是the effect I don't want！

我看到的效果是什么？是因为实际上是标签的旋转元素是方形而不是圆形吗？那么为什么它只在 HTML 格式正确时发生？

以防万一，GIFS 记录在 Safari 中（我也用它来预览代码）。但是 codepen 也显示了 shifting。我可能搜索了错误的术语，但我似乎找不到答案。

Answer 1

第一个建议 - 不要忘记为绝对元素设置 x 和 y 位置，这可能会导致某些浏览器出现问题。而你的问题出在label (faq-btn)，因为它是一个矩形，但为了好的动画它应该是一个正方形。

这里是两个类的修复：

.faq-row {
    position: relative;
    line-height: 30px;
    font-size: 24px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
}

.faq-btn {
    display: flex;
    position: absolute;
    top: 0;
    left: 400px;
    transition: all 1s ease-out;
}

SVG 在旋转时移动位置

SVG shifts position on rotating

html

css

animation

svg

accordion