animation - 为 SVG 可见性动画设置 keyTimes

Question

我正在尝试使用 SVG 创建一个闪烁的闪电图标，但我无法让 keyTimes 工作。目的是设置一个更逼真的闪光灯，在打开和关闭之间不均匀的步骤，但出于这个问题的目的，我已经像这样简化了 SVG

<g id="lightning">
    <polygon fill="#FFD744" points="55.724,91.297 41.645,91.297 36.738,105.038 47.483,105.038 41.622,124.568 62.783,98.526 51.388,98.526" />

    <animate attributeType="CSS"
         attributeName="visibility"
         from="hidden" 
         to="hidden"
         values="hidden;visible;hidden"
         keyTimes="0; 0.5; 0.6"
         dur="2s"
         repeatCount="indefinite"/>


</g>

但是，如果我有 keyTimes 属性，所有闪烁都会停止并且闪电在屏幕上是静态的。如果我删除属性，闪烁会很慢，因为循环有两秒长，而且它只是轻轻地来回摆动。

Answer 1

来自SVG specification

For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be 1. The key time associated with each value defines when the value is set; values are interpolated between the key times.

您尚未指定 calcMode，但默认值为线性，因此最后一个值必须为 1，否则动画无效并被忽略。

如果我将最后一个值设置为 1，会发生以下情况。

<svg id="lightning">
    <polygon fill="#FFD744" points="55.724,91.297 41.645,91.297 36.738,105.038 47.483,105.038 41.622,124.568 62.783,98.526 51.388,98.526" />

    <animate attributeType="CSS"
         attributeName="visibility"
         from="hidden" 
         to="hidden"
         values="hidden;visible;hidden"
         keyTimes="0; 0.5; 1"
         dur="2s"
         repeatCount="indefinite"/>


</svg>