在 SVG 中 - 如何在不使用 javascript 的情况下加快动画速度或更改其持续时间？答案

【问题标题】：In an SVG - how can you speed up an animation or change its duration without using javascript?在 SVG 中 - 如何在不使用 javascript 的情况下加快动画速度或更改其持续时间？
【发布时间】：2021-03-21 02:03:57
【问题描述】：

如何更改 SVG 中动画过渡的持续时间以使动画加速或减速？我尝试了以下，dur 属性会发生变化。

<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

    <polygon points="60,30 90,90 30,90">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 60 70"
                          to="360 60 70"
                          dur="10s"
                          repeatCount="indefinite">
             <animate  attributeType="XML" attributeName="dur" values="10s;5s;1s" dur="3s" />
         </animateTransform>
    </polygon>
</svg>

这最终不起作用。

我不能为此目的使用 javascript（只想使用纯 svg）。

有什么建议吗？

【问题讨论】：

标签： html animation svg

【解决方案1】：

您可以使用关键时间和多个值让动画按您的意愿运行。

您的总持续时间是 10 + 5 + 1 秒，即 16 秒

所以你的 keyTimes 需要从 0 到 10/16，然后到 15/16，最后是结束，即 1

<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

    <polygon points="60,30 90,90 30,90">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          values="0 60 70;360 60 70;720 60 70;1080 60 70;"
                          keyTimes="0 ; 0.625 ; 0.9375 ; 1"
                          dur="16s"
                          repeatCount="indefinite">

         </animateTransform>
    </polygon>
</svg>

【讨论】：