html - svg 使用动画标签显示加载点的动画路径
问题描述
我无法让 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 秒,然后第二个点将开始(突出显示和淡化自身),然后是第三个点,但这将永远持续下去。
关于排序的任何指示都会有所帮助。
谢谢
解决方案
您似乎缺少动画上的 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>
推荐阅读
- tableau-api - 在 Tableau 中解析平面文件
- arrays - 如何将 array.find() 与打字稿一起使用?
- android - 与 Room 和 SharedPreferences 交互时的最佳实践
- javascript - 单击时我的功能未运行,显示未定义
- android - 我需要做什么才能在滚动时隐藏工具栏?
- javascript - Nuxt 项目中未加载 JS 文件
- rabbitmq - RabbitMQ:限制跨多个连接的消费者预取
- excel - 自动筛选所需的错误代码对象
- javascript - 获取段落对齐值
- iframe - 在 Electron 中禁用同源策略(需要这个才能与 iframe 一起使用)