Início / coding / Perguntas / 77352599
Accepted
Maureen Moore
Asked: 2023-10-24 21:39:26 +0800 CST

Animação SVG/CSS não gira

  • 772

Copiei um trecho de código daqui: https://blog.hubspot.com/website/svg-css-animation mas não consigo fazê-lo funcionar. o que estou perdendo?

<svg width="100px" height="100px">
  <rect x="10" y="10" width="80" height="80" fill="#f7f3d1" css-transition: all 1s ease; css-animation: rotate 5s infinite linear />
</svg>

svg

1 respostas

  1. Best Answer

    Bem, o trecho já mostra que a sintaxe é inválida:

    css-transition: all 1s ease; css-animation: rotate 5s infinite linear

    O estilo embutido usa key=valueformato.

    Se você não quiser especificar nenhum ponto-chave, você pode usar o <animateTransform>elemento SVG para girar o<rect>

    <svg width="100px" height="100px">
    <rect x="10" y="10" width="80" height="80" fill="#f7f3d1">
        <animateTransform attributeName="transform" type="rotate" dur="1s" from="0 40 40" to="360 40 40"  repeatDur="indefinite"/>
    </rect>
</svg>

    • 0

relate perguntas