设置 SVG 可见性动画的 keyTimes答案

【问题标题】：Setting keyTimes for SVG visibility animation设置 SVG 可见性动画的 keyTimes
【发布时间】：2016-05-09 17:40:27
【问题描述】：

我正在尝试使用 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 属性，所有闪烁停止并且闪电在屏幕上是静态的。如果我删除该属性，闪烁会很慢，因为循环是两秒长，它只是轻轻地来回摆动。

【问题讨论】：

标签： animation svg

【解决方案1】：

来自SVG specification

对于线性和样条动画，列表中的第一个时间值必须为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>

【讨论】：