操纵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;

不知道如何用我的代码制作一个实际的工作片段，sry

这是我当前动画的一个例子：

Answer 1

您需要将transform-origin设置在svg的中心。 但是你可以采用不同的方式。 您可以使用以下方式为stroke-dashoffset设置动画，而不是为transform设置动画：

 .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> 

Answer 2

欢迎来到Stack。

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

• 只需使用一个从0％到100％的动画。

• 动画从0deg到360deg

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

对于反向动画，您可以使用反转方向

animation-direction: alternate; 在你的CSS中