0
는
내 코드 왼쪽으로 모양을 이동, 2 초 동안 페이드와 반복 모든 일초 이후업데이트 SVG 애니메이션
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="636px" height="155px" version="1.1">
\t <g id="canvas" transform="translate(0.5,0.5)"> \t \t
\t </g>
</svg>
<script language="javascript">
\t var svgNS = "http://www.w3.org/2000/svg";
\t var canvas = document.querySelector('#canvas');
\t function svgElement(name, attributes) {
\t \t var element = document.createElementNS(svgNS, name); //to create a circle, for rectangle use rectangle
\t \t for (key in attributes)
\t \t \t element.setAttribute(key, attributes[key]);
\t \t return canvas.appendChild(element);
\t }
\t function render() {
\t \t while (canvas.firstChild) canvas.removeChild(canvas.firstChild);
\t \t svgElement('rect', {x:x, y:"20", width:"100",height:"100",style:"fill:blue"})
\t }
\t var x = 100
\t render()
\t var wait = 0
\t function clock() {
\t \t if (wait > 0) {
\t \t \t wait -= 1
\t \t \t if (wait == 0)
\t \t \t \t x = 100
\t \t } else {
\t \t \t x -= 10
\t \t \t if (x < 1) {
\t \t \t \t svgElement('animate', {attributeType:"CSS", attributeName:"opacity", from:1, to:0, dur:"2s", fill:"freeze"})
\t \t \t \t wait = 30
\t \t \t } else
\t \t \t \t render()
\t \t }
\t \t
\t }
\t
\t setInterval(clock, 100)
</script>문제 페이딩 불투명도가 두 번째 즉각적인 때문이다 되풀이. 사각형이 즉시 사라집니다.