Gav*_*ock 5 javascript animation svg
我在一个AJAX网络应用程序中使用SVG图表.当收到初始数据时,我想将图表元素(如条形图)从默认的0值设置为新的数据值.如果用户选择新数据集,我从服务器请求新数据,然后想要将条形图从前一个值设置为新值.
<rect x="0" y="0" width="1px" height="20px" fill="red">
<animate id="anim" attributeName="width" attributeType="XML"
begin="indefinite" from="0" to="100px" dur="0.8s" fill="remove"/>
</rect>
每次收到数据时,我都会设置from和to属性并调用beginElement().
如果我fill="remove"在SVG动画中设置,则每次加载新数据集时,条形图都会正确设置动画,但当然,在动画之间,条形图会返回其默认宽度.
设置width.baseVal.value为在调用之前或之后建立新的基值beginElement()会导致非常讨厌的闪烁.
所以我尝试使用fill="freeze"条形图在每个动画结束时保持其宽度.问题是第一个动画工作,但每个后续调用立即beginElement()将栏恢复到其默认宽度,动画停止工作.
我正在使用Chrome 12.0进行测试.下面是一个示例,了解使用冻结时动画如何断开.
<!DOCTYPE html>
<html>
<head><title>Test SVG animation</title></head>
<body>
<svg width="200px" height="20px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="0" y="10px" width="200px" height="2px"/>
<rect x="0" y="0" width="1px" height="20px" fill="red">
<animate id="anim" attributeName="width" attributeType="XML" begin="indefinite" from="0" to="100px" dur="1.3s" fill="freeze"/>
</rect>
parent.anim = document.getElementById('anim');
</svg>
<br/>
<a href="javascript:anim.beginElement();">anim.beginElement();</a>
<br/>
<a href="javascript:anim.endElement();">anim.endElement();</a>
<br/>
<br/>
<a href="javascript:anim.setAttribute('to', '50px');">anim.setAttribute('to', '50px');</a>
<br/>
<a href="javascript:anim.setAttribute('to', '150px');">anim.setAttribute('to', '150px');</a>
<br/>
<br/>
<a href="javascript:anim.setAttribute('fill', 'remove');">anim.setAttribute('fill', 'remove');</a>
<br/>
<a href="javascript:anim.setAttribute('fill', 'freeze');">anim.setAttribute('fill', 'freeze');</a>
<br/>
</body>
</html>
如何设置条形宽度的动画,让它保持新的宽度,然后在它们到达时重复地将其设置为新值？