样式化组件，SVG 没有动画

Question

我在 React 旁边使用 styled-components 并且我有这样的组件：

import styled, { keyframes } from 'styled-components'
import { ReactComponent as SpinnerIcon } from './spinner.svg'

const rotate = keyframes`
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
`

const Spinner = styled(SpinnerIcon)`
    margin-top: 50px;
    animation: ${rotate} 2s ease-in infinite;
`

export default Spinner

当我像这样使用这个组件时：

<Spinner width='50px' height='50px' />

我看到了这个组件，但它没有动画。怎么了？

Answer 1

试试这个：

  const Spinner = styled.img.attrs({
      src: SpinnerIcon,
    })`
        margin-top: 50px;
        animation: ${rotate} 2s ease-in infinite;

如果这对您不起作用，请也分享您的 svg 文件。此外，您可能需要使用 linear 函数而不是 ease-in `