此前我心血來潮做了個svg簡易箭頭動畫。
直到我做了立體生成器2代,才發現問題:實現循環動畫不應該用「id.end()+3s」這種辦法,否則會因為id重覆或元素消失而出現問題。
應該用 values="0 0;0 228;0 228" dur="7s" repeatCount="indefinite"
來實現。
具體代碼:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="240.0px" height="240.0px">
<line x1="120" y1="0" x2="120" y2="0" stroke="blue" stroke-width="4" >
<animate attributeName="y2" dur="7s" values="0;228;228" repeatCount="indefinite"/>
</line>
<polygon stroke="none" fill="blue" points="114,0 126,0 120,12" >
<animateTransform attributeName="transform" attributeType="XML" type="translate"
values="0 0;0 228;0 228" dur="7s" repeatCount="indefinite"/>
</polygon>
</svg>
又做了個小的: