Search code examples
svg

SVG/CSS Animation not rotating

I copied a code snippet from here: https://blog.hubspot.com/website/svg-css-animation but I can't get it to work. What am I missing?

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

Solution

  • Well the snippet already shows that the syntax is invalid:

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

    Inline styling uses key=value format.

    If you don't want to specify any keypoints or so, you can use the SVG <animateTransform> element to rotate the <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>