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>

duration =“2s”不能用于动画svg元素

1 个答案: