设置 SVG 可见性动画的关键时间

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

对于线性和样条动画，列表中的第一个时间值必须为 0，列表中的最后一个时间值必须为 1。与每个值关联的关键时间定义了该值的设置时间；值在关键时间之间插值。

您尚未指定 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>