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="1s" keyTimes="0;0.50;1" repeatCount="indefinite" values="#D7E0E7;#879CAD;#EBF0F3"/> 
</rect> 

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

當我改變持續時間兩秒停止動畫：

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

我真的想知道這裏發生了什麼。

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>