Question

我试图用SVG创建闪烁的闪电图标，但我无法使keyTime工作。目的是建立一个更加逼真的闪光，在打开和关闭之间有不均匀的步骤但是为了这个问题的目的，我已经像这样简化了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

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

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

如果我将最后一个值设置为1，会发生什么。

＆＃13;

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

＆＃13;

设置SVG可见性动画的keyTimes

1 个答案: