프로그래밍/SVG

SVG Animate

쇠주는참이슬 2012. 3. 21. 13:02

막대바의 width 값이 0 에서 100까지 1초동안 애니메이트 된다.
정말 간단한 예제임.

이걸 응용한다면 차트까지도 만들 수 있겠지 

bar 



<html>
<body>

<p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="20" y="20" width="250" height="30" style="fill:blue">
    <animate attributeTransform="transform" attributeName="width" from="1" to="100" dur="1s"  />
  </rect>
</svg>

</body>
</html>

repeatCount="indefinite" 속성을 animate에 넣어주면 계속 반복된다.
column 컬럼은 나중에 다시...