duration = "2s"は、svg要素のアニメーション化では機能しません。

Question

svg要素をアニメーション化しようとしています。 durationを1sに設定し、それに応じてkeyTimesと書くと動作します。しかし、私が持続時間を2sにすると、何とかそれが壊れます。本当に私

<rect id="Rectangle-8-Copy-4" fill="#D7E0E7" x="10" y="10" width="46" height="4"> 
    <animate attributeName="fill" begin="0s" dur="2s" keyTimes="0;1;2" repeatCount="indefinite" values="#D7E0E7;#879CAD;#EBF0F3"/> 
</rect> 

https://jsfiddle.net/s3958psq/

：

<rect id="Rectangle-8-Copy-4" fill="#D7E0E7" x="10" y="10" width="46" height="4"> 
    <animate attributeName="fill" begin="0s" dur="1s" keyTimes="0;0.50;1" repeatCount="indefinite" values="#D7E0E7;#879CAD;#EBF0F3"/> 
</rect> 

https://jsfiddle.net/s3958psq/1/

私は2秒に時間を変更すると、それはアニメーションを停止します

これは動作するコードですここで何が起こっているのか知りたい。

Answer 1

期間を変更するときは、keyTimesを変更しないでください。それらは常に0（開始）と1（終了）の間にあります。

0..1の範囲外の値は無効で、アニメーションは無視されます。

<svg width="83px" height="114px" viewBox="0 0 83 114"> 
 
    <title>Group 23 Copy 3</title> 
 
    <desc>Created with Sketch.</desc> 
 
    <defs> 
 
     <path d="M41.5,1.99808051 C41.5,0.894571116 40.6135756,0 39.4919018,0 L4.15,0 C1.8592,0 0,1.824 0,4.07142857 L0,109.928571 C0,112.176 1.8592,114 4.15,114 L78.85,114 C81.1408,114 83,112.176 83,109.928571 L83,42.7110903 C83,41.6082856 82.1024789,40.7142857 80.9907068,40.7142857 L43.575,40.7142857 C42.427525,40.7142857 41.5,39.8043214 41.5,38.6785714 L41.5,1.99808051 Z M47.7922479,2.10168901 C46.6091171,0.940958221 45.65,1.34759596 45.65,2.99863879 L45.65,33.6442184 C45.65,35.3003208 47.0013718,36.6428571 48.6433707,36.6428571 L80.0066293,36.6428571 C81.6598223,36.6428571 82.0392027,35.7002505 80.8577521,34.5411681 L47.7922479,2.10168901 Z" id="path-1"></path> 
 
     <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="83" height="114" fill="white"> 
 
      <use xlink:href="#path-1"></use> 
 
     </mask> 
 
    </defs> 
 
    <rect fill="#D7E0E7" x="10" y="10" width="46" height="4"> 
 
     <animate attributeName="fill" begin="0s" dur="2s" keyTimes="0;0.5;1" repeatCount="indefinite" values="#D7E0E7;#879CAD;#EBF0F3"/> 
 
    </rect> 
 
</svg>