SVG可視性アニメーションのkeyTimesを設定する

Question

SVGで点滅する稲妻アイコンを作成しようとしていますが、動作するkeyTimesを取得できません。意図は、オンとオフの間が、私はkeyTimes属性は、すべての点滅が停止し、属性を持っている場合、私はしかし、そう

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

のようにSVGを簡素化しているこの質問の目的のために不均一なステップをより現実的なフラッシュを設定することです落雷は画面上で静的です。アトリビュートを削除すると、ループが2秒間長くなり、ゆっくりと前後に振動するため、点滅が遅くなります。

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

に最後の値を設定した場合、何が起こるかです