Svg动画重复
Svg动画重复
提问于 2017-05-08 07:21:52
我有一个svg图像，是以流程图的形式。因为这是一个流程图，所以我决定用流程图的形式来动画。现在我的问题是，一旦动画完成，我如何重新启动整个动画。
我曾经做过的动画：
- 动画标签
- 流程图的每个部分都在每个组中维护。
因为他们是在赛珍珠组，我不能重新启动动画。这方面的解决方案可以在jQuery中实现。
请帮帮我。
谢谢
回答 2
Stack Overflow用户
发布于 2017-05-08 09:43:54
我不认为您需要JQuery，在第85行和第88行中，将它们更改为
<animate id="first_arrow_fill1" dur="1s" attributeName="offset" begin="1s;third_text_anim4.end" fill="freeze" from="0" to="1" />
和
<animate id="first_arrow_fill2" dur="1s" attributeName="offset" begin="1s;third_text_anim4.end" fill="freeze" from="0" to="1" />
分别使用。
基本上，它说从1秒开始，在third_text_anim4结束后再重复。显然，它不会立即产生预期的效果，但我认为你可以找出其余的。
编辑:在最后一个动画标签(无论你想最后运行的动画)，添加onend。例如，我在第45行添加了它。
<animate id="third_text_anim4" onend="animComlete()" attributeName="fill" from="#0D5982" to="#684F28" begin="third_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>然后在文件末尾编写JavaScript函数，然后关闭body标记，
<script type="text/javascript">
function animComlete() {
document.getElementsByTagName("svg")[0].setCurrentTime(0);
}
</script>这应该就行了！
Stack Overflow用户
发布于 2017-05-08 10:27:29
我只能想出一个Javascript解决方案。它将一个onend标记插入到最后一个圆中，以使svg计时器三倍于0。
<body>
<svg width="100%" height="500" viewBox="0 0 750 160" id="svg1">
<g id="layer1" transform="translate(0,-892.9134)">
<g id="g4610" transform="matrix(0.78599195,0,0,0.78599195,25.527464,548.09428)">
<ellipse ry="14.89975" rx="14.426742" cy="537.94202" cx="6.8185301" id="path4469" style="opacity:1;fill:#826333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:1.32999992;stroke-opacity:1" />
<g id="third_path" class="circle_hover">
<defs>
<linearGradient id="fill_anim3">
<stop offset="0" stop-color="#71D0E8">
<animate id="third_arrow_fill1" dur="1s" attributeName="offset" begin="second_circle_anim2.end" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#ded9d5">
<animate id="third_arrow_fill2" dur="1s" attributeName="offset" begin="second_circle_anim2.end" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
</defs>
<path
style="opacity:1;fill:url(#fill_anim3);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:1.32999992;stroke-opacity:1"
d="m 290.25586,714.97266 c -3.7798,0.0116 -7.08387,0.11885 -9.64063,0.16992 a 14.426742,14.89975 0 0 1 2.54688,8.42578 14.426742,14.89975 0 0 1 -3.2207,9.36328 c 19.60354,-0.32683 44.81836,-5.80183 44.81836,23.96875 l 0,74.5 c 0,29.35747 39.47699,43.53689 68.68945,41.41602 l -0.0137,-0.25 a 14.426742,14.89975 0 0 1 -4.12696,-10.42579 14.426742,14.89975 0 0 1 2.46094,-8.3164 c -20.47912,-1.4012 -42.18868,-7.06713 -44.26562,-23.69727 -2.48013,-19.85839 -2.21769,-53.04506 0,-72.46875 4.49713,-39.38826 -34.71221,-42.75464 -57.24805,-42.68554 z" transform="translate(9.6628013,-251.10956)" id="path4577" />
<ellipse
style="opacity:1;fill:#c76875;fill-opacity:1;fill-rule:nonzero;stroke:#0066B3;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:91.544189453125;stroke-dashoffset:91.544189453125;stroke-opacity:1" id="ellipse4581" cx="413.39835" cy="611.03009" rx="14.426742" ry="14.89975">
<animate id="third_circle_anim1" attributeName="stroke-dashoffset" from="91.544189453125" to="0" begin="third_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
<animate id="third_circle_anim2" attributeName="fill" from="#ffa98f" to="#0066B3" begin="third_circle_anim1.end" dur="1s" fill="freeze" repeatCount="1" onend="restart()"></animate>
</ellipse>
<text class="head_content" x="390" y="650">sample
<animate id="third_text_anim1" attributeName="fill" from="#F67A83" to="#4F3CAA" begin="third_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
</text>
<text class="head_content" x="340" y="678">sample
<animate id="third_text_anim2" attributeName="fill" from="#F67A83" to="#4F3CAA" begin="third_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
</text>
<text class="sub_content" x="353" y="700">sample
<animate id="third_text_anim3" attributeName="fill" from="#0D5982" to="#684F28" begin="third_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
<tspan class="sub_content" x="317" y="720">sample
<animate id="third_text_anim4" attributeName="fill" from="#0D5982" to="#684F28" begin="third_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
</tspan>
</text>
</g>
<g id="second_path" class="circle_hover">
<defs>
<linearGradient id="fill_anim2">
<stop offset="0" stop-color="#71D0E8">
<animate id="second_arrow_fill1" dur="1s" attributeName="offset" begin="first_circle_anim2.end" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#ded9d5">
<animate id="second_arrow_fill2" dur="1s" attributeName="offset" begin="first_circle_anim2.end" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
</defs>
<path
style="opacity:1;fill:url(#fill_anim2);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:1.32999992;stroke-opacity:1"
d="m 266.24609,462.17383 c -36.92375,-3.57967 -65.48691,13.85595 -64.78711,41.50917 0,0 -0.51423,51.85493 -0.50508,74.24685 0.01,23.45457 -27.31442,22.80234 -47.3058,23.13426 1.10753,2.14916 2.88782,5.74543 2.89096,8.18003 -9.6e-4,3.99327 -1.55391,7.81901 -4.31054,10.61914 3.27885,-1.0397 75.01148,3.93253 71.9746,-42.69184 -1.31839,-20.24093 0,-72.46832 0,-72.46832 -0.20538,-18.15802 14.03939,-23.13357 41.84376,-25.10351 -1.71604,-2.50694 -2.64034,-5.50017 -2.64649,-8.57031 0.006,-3.19035 1.00362,-6.29442 2.8457,-8.85547 z" transform="translate(0.5714286,1.42857)" id="path4573" />
<ellipse ry="14.89975" rx="14.426742" cy="472.45868" cx="278.39835" id="ellipse4579"
style="opacity:1;fill:#fb787f;fill-opacity:1;fill-rule:nonzero;stroke:#0066B3;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:91.544189453125;stroke-dashoffset:91.544189453125;stroke-opacity:1">
<animate id="second_circle_anim1" attributeName="stroke-dashoffset" from="91.544189453125" to="0" begin="second_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
<animate id="second_circle_anim2" attributeName="fill" from="#ffa98f" to="#0066B3" begin="second_circle_anim1.end" dur="1s" fill="freeze" repeatCount="1"></animate>
</ellipse>
<text class="head_content" x="250" y="450">sample
<animate id="text_anim3" attributeName="fill" from="#F67A83" to="#4F3CAA" begin="second_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
</text>
<text class="head_content" x="235" y="385">sample
<animate id="text_anim4" attributeName="fill" from="#F67A83" to="#4F3CAA" begin="second_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
</text>
<text class="sub_content" x="175" y="405">sample
<animate id="text_anim5" attributeName="fill" from="#0D5982" to="#684F28" begin="second_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
<tspan x="225" y="425" class="sub_content">sample
<animate id="text_anim6" attributeName="fill" from="#0D5982" to="#684F28" begin="second_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
</tspan>
</text>
</g>
<g id="first_path" class="circle_hover">
<defs>
<linearGradient id="fill_anim1">
<stop offset="0" stop-color="#71D0E8">
<animate id="first_arrow_fill1" dur="1s" attributeName="offset" begin="1s" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#ded9d5">
<animate id="first_arrow_fill2" dur="1s" attributeName="offset" begin="1s" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
</defs>
<path
style="opacity:1;fill:url(#fill_anim1);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1"
d="m 18.929688,529.44141 c 1.140051,2.17164 1.739409,4.60197 1.74414,7.07226 -0.0033,2.41521 -0.575072,4.79339 -1.666016,6.92969 l 36.876954,0 c 17.101683,0 11.124297,14.78094 13.525192,34.92207 7.304679,27.32129 35.935342,38.13518 62.612922,41.73111 -1.5457,-2.42739 -4.33484,-7.94712 -4.33733,-10.8524 0.005,-3.11453 0.90166,-5.74434 2.66254,-8.27277 -23.30774,-1.1068 -29.8766,-7.34118 -39.33413,-22.29658 -4.829034,-11.35821 5.68082,-49.23338 -28.703413,-49.23338 z" transform="translate(0.5714286,1.42857)" id="path4471" />
<ellipse
style="opacity:1;fill:#ffa98f;fill-opacity:1;fill-rule:nonzero;stroke:#0066B3;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:91.544189453125;stroke-dashoffset:91.544189453125;stroke-opacity:1"
id="ellipse4571" cx="142.68405" cy="610.67297" rx="14.426742" ry="14.89975">
<animate id="first_circle_anim1" attributeName="stroke-dashoffset" from="91.544189453125" to="0" begin="first_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1"></animate>
<animate id="first_circle_anim2" attributeName="fill" from="#ffa98f" to="#0066B3" begin="first_circle_anim1.end" dur="1s" fill="freeze" repeatCount="1" ></animate>
</ellipse>
<text class="head_content" x="115" y="650">sample
<animate id="first_text_anim1" attributeName="fill" from="#F67A83" to="#4F3CAA" begin="first_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1" ></animate>
</text>
<text class="head_content" x="108" y="678">sample
<animate id="first_text_anim2" attributeName="fill" from="#F67A83" to="#4F3CAA" begin="first_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1" ></animate>
</text>
<text class="sub_content" x="60" y="700">sample
<animate id="first_text_anim3" attributeName="fill" from="#0D5982" to="#684F28" begin="first_arrow_fill2.end" dur="1s" fill="freeze" repeatCount="1" ></animate>
</text>
</g>
</g>
</g>
</svg>
<script>
var restart = function(){document.getElementById("svg1").setCurrentTime(0)}
</script>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43841942
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号