操作SVG圆的起点以创建围绕中心旋转的动画

Question

我有一个通过两个<circle />绘制在页面上的加载器（旋转图标）。需要让这两条路径以不同的方向围绕中心旋转，使圆圈围绕SVG的中心旋转，而不是平移。

尝试使用transform: rotate(360deg)进行动画处理。但路径会失控并且原点位置可能改变。尝试管理viewBox来达到预期的结果，但没有成功。

import React, { PureComponent } from 'react';
import styled from 'styled-components';
import { prop } from 'styled-tools';

class Loader extends PureComponent {
  render() {
    return (
      <Spinner
        xmlns="http://www.w3.org/2000/svg"
        width="200"
        height="200"
        preserveAspectRatio="xMidYMid"
        viewBox="0 0 100 100"
      >
        <circle
          className='outer'
          cx="50"
          cy="50"
          r="40"
          fill="none"
          stroke="#374a67"
          stroke-dasharray="63 63"
          stroke-linecap="round"
          stroke-width="4"
        />
        <circle
          className='inner'
          cx="50"
          cy="50"
          r="35"
          fill="none"
          stroke="#d50000"
          stroke-dasharray="55 55"
          stroke-dashoffset="55"
          stroke-linecap="round"
          stroke-width="4"
        />
      </Spinner>
    )
  }
}

const Spinner = styled.svg`
  & .outer {
    animation: rotate 2s linear infinite;
  }

  & .inner {
    animation: reverseRotate 2s linear infinite;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes reverseRotate {
    100% {
      transform: rotate(-360deg);
    }
  }
`;


export default Loader;

抱歉，我不知道如何将我的代码片段制作成真正的工作示例。

这是我当前动画的示例：

- moshyfawn

Answer 1

你需要将 transform-origin 设置在 svg 中心。不过，你可以采用不同的方式来实现此目的。你可以通过这种方式而不是动画化 transform 来动画化 stroke-dashoffset：

.outer {
    stroke-dashoffset:0;
    animation: rotate 2s linear infinite;
  }

.inner {
    animation: reverseRotate 2s linear infinite;
  }

 @keyframes rotate {
    100% {
      stroke-dashoffset:126px;
    }
  }

  @keyframes reverseRotate {
    100% {
      stroke-dashoffset:-55px;
    }
  }

svg{border:1px solid}

<svg  xmlns="http://www.w3.org/2000/svg"
        width="200"
        height="200"
        preserveAspectRatio="xMidYMid"
        viewBox="0 0 100 100"
      >
        <circle
          class='outer'
          cx="50"
          cy="50"
          r="40"
          fill="none"
          stroke="#374a67"
          stroke-dasharray="63"
          stroke-linecap="round"
          stroke-width="4"
        />
        <circle
          class='inner'
          cx="50"
          cy="50"
          r="35"
          fill="none"
          stroke="#d50000"
          stroke-dasharray="55"
          stroke-dashoffset="55"
          stroke-linecap="round"
          stroke-width="4"
        />
      </svg>

- enxaneta

---

那确实解决了。谢谢！ 对我来说，SVG动画有时候就像魔法一样:D - moshyfawn

Answer 2

欢迎来到Stack。

您需要进行一些小的调整才能使其正常工作。

• Just use one animation that goes from 0% to 100%.

• Animate from 0deg to 360deg

  @keyframes rotate {
     0% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(360deg);
     }
   }
  

对于反向动画，您可以在CSS中使用animation-direction: alternate;来改变方向。

- Badrush

---

谢谢你的问候！:D 关于我的<circle />，我可能有点不清楚。我通过<circle />标签绘制了两个未完成的圆。这可能是导致我的动画出现问题的原因。我已经用一个例子编辑了我的问题。 顺便说一句，我应用了你的更正，但仍然无法达到预期效果。 - moshyfawn