主页 / coding / 问题 / 77352599
Accepted
Maureen Moore
Asked: 2023-10-24 21:39:26 +0800 CST

SVG/CSS 动画不旋转

  • 772

我从这里复制了一个代码片段： https: //blog.hubspot.com/website/svg-css-animation ，但我无法让它工作。我缺少什么？

<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 个回答

  1. Best Answer

    代码片段已经表明该语法无效：

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

    内联样式使用key=value格式。

    如果您不想指定任何关键点等，可以使用 SVG<animateTransform>元素来旋转<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

相关问题