티스토리 뷰
막대바의 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 컬럼은 나중에 다시...
repeatCount="indefinite" 속성을 animate에 넣어주면 계속 반복된다.
column 컬럼은 나중에 다시...
'프로그래밍 > SVG' 카테고리의 다른 글
SVG로 만든 기본 bar chart (2) - d3.js 이용 (0) | 2012.03.21 |
---|---|
SVG로 만든 기본 bar chart (1) - d3.js 이용 (0) | 2012.03.21 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- json
- MSSQL
- rowspan
- jQuery
- WCF
- css3
- WebApi
- JS
- IE
- workbook
- 저장프로시저
- 제이쿼리
- Style
- Mobile
- jQuery Mobile
- 셀렉터
- ASP.NET
- CSS
- Excel
- jquery chart
- 자바스크립트
- grid
- radius
- html5
- 프로시저
- Ajax
- JavaScript
- Chart
- drag&drop
- SVG
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함