Question

我无法使用fill属性获取svg点（路径）进行动画处理

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
    <g id="Group-3" transform="translate(18.000000, 43.000000)">
                <path fill="#E1F1F6" d="M1.99995389,4 C1.18943703,3.99996826 0.459080007,3.51075355 0.150588108,2.76124016 C-0.157903792,2.01172677 0.0164743319,1.15013249 0.592137819,0.579563372 C1.16780131,0.00899425181 2.03091154,-0.157718518 2.77765322,0.157423404 C3.52439491,0.472565326 4.00709836,1.20724199 3.99992565,2.01772711 C3.99021168,3.11536294 3.09763271,4.00004298 1.99995389,4 L1.99995389,4 Z" id="Path" >
                  <animate id="first" attributeName="fill" from="#89CBDF" to="#E1F1F6" begin="1s;first.end+3s" dur="1s"/>
                </path>
                <path fill="#89CBDF" d="M9.99995389,4 C9.18943703,3.99996826 8.45908001,3.51075355 8.15058811,2.76124016 C7.84209621,2.01172677 8.01647433,1.15013249 8.59213782,0.579563372 C9.16780131,0.00899425181 10.0309115,-0.157718518 10.7776532,0.157423404 C11.5243949,0.472565326 12.0070984,1.20724199 11.9999256,2.01772711 C11.9902117,3.11536294 11.0976327,4.00004298 9.99995389,4 L9.99995389,4 Z" id="Path" >
                  <animate id="second" attributeName="fill" from="#89CBDF" to="#E1F1F6" begin="2s;second.end+3s" dur="1s"/>
                </path>
                <path fill="#89CBDF" d="M17.9999539,4 C17.189437,3.99996826 16.45908,3.51075355 16.1505881,2.76124016 C15.8420962,2.01172677 16.0164743,1.15013249 16.5921378,0.579563372 C17.1678013,0.00899425181 18.0309115,-0.157718518 18.7776532,0.157423404 C19.5243949,0.472565326 20.0070984,1.20724199 19.9999256,2.01772711 C19.9902117,3.11536294 19.0976327,4.00004298 17.9999539,4 L17.9999539,4 Z" id="Path" >
                  <animate id="third" attributeName="fill" from="#89CBDF" to="#E1F1F6" begin="3s;third.end+3s" dur="1s" />
                </path>
            </g>
</svg> 

</body>
</html>

我的期望是，第一个点将在1秒钟内进行动画处理，并持续1秒钟，然后第二个点将开始（突出显示并自身淡入淡出），然后是第三个点，但这将一直持续下去。

任何有关排序的指针都将有所帮助。

谢谢

Answer 1

您似乎缺少动画上的fill =“ freeze”，以使其保持在最终动画状态，例如动画后

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
    <g id="Group-3" transform="translate(18.000000, 43.000000)">
                <path fill="#E1F1F6" d="M1.99995389,4 C1.18943703,3.99996826 0.459080007,3.51075355 0.150588108,2.76124016 C-0.157903792,2.01172677 0.0164743319,1.15013249 0.592137819,0.579563372 C1.16780131,0.00899425181 2.03091154,-0.157718518 2.77765322,0.157423404 C3.52439491,0.472565326 4.00709836,1.20724199 3.99992565,2.01772711 C3.99021168,3.11536294 3.09763271,4.00004298 1.99995389,4 L1.99995389,4 Z" id="Path" >
                  <animate id="first" attributeName="fill" from="#89CBDF" to="#E1F1F6" begin="1s;first.end+3s" dur="1s" fill="freeze" />
                </path>
                <path fill="#89CBDF" d="M9.99995389,4 C9.18943703,3.99996826 8.45908001,3.51075355 8.15058811,2.76124016 C7.84209621,2.01172677 8.01647433,1.15013249 8.59213782,0.579563372 C9.16780131,0.00899425181 10.0309115,-0.157718518 10.7776532,0.157423404 C11.5243949,0.472565326 12.0070984,1.20724199 11.9999256,2.01772711 C11.9902117,3.11536294 11.0976327,4.00004298 9.99995389,4 L9.99995389,4 Z" id="Path" >
                  <animate id="second" attributeName="fill" from="#89CBDF" to="#E1F1F6" begin="2s;second.end+3s" dur="1s" fill="freeze"/>
                </path>
                <path fill="#89CBDF" d="M17.9999539,4 C17.189437,3.99996826 16.45908,3.51075355 16.1505881,2.76124016 C15.8420962,2.01172677 16.0164743,1.15013249 16.5921378,0.579563372 C17.1678013,0.00899425181 18.0309115,-0.157718518 18.7776532,0.157423404 C19.5243949,0.472565326 20.0070984,1.20724199 19.9999256,2.01772711 C19.9902117,3.11536294 19.0976327,4.00004298 17.9999539,4 L17.9999539,4 Z" id="Path" >
                  <animate id="third" attributeName="fill" from="#89CBDF" to="#E1F1F6" begin="3s;third.end+3s" dur="1s" fill="freeze"/>
                </path>
            </g>
</svg> 

</body>
</html>

使用animate标签显示加载点的svg动画路径

1 个答案: