개인이 끄적끄적 거리는 블로그

http://caniuse.com/ HTML5 / CSS3 / SVG 등등 웹에서 사용되는 스크립트 및 기술에 대해서 현재 브라우저가 어디까지 지원하는지 자세히 설명해 주는 사이트. 지원안하는기능인데 왜 자꾸 안되나.. 삽질하지말고.. 한번씩 확인해보고 쓰는게 좋을듯.

SVG 뿐만 아니라 VML 형식으로도 제공한다. Firefox Safari Chrome Opera IE 좋다...... http://jvectormap.owl-hollow.net/

위에 소스와 별 다르진 않지만 animate 속성을 추가해줬다. 굵게 처리된 부분을 확인하면 된다. 문제는 크롬과 파이어폭스에서만 지원된다는것. IE9 은 안된다.. 망할... PC용 사파리도 안됨.. 모바일은 되려나?? 개발자 도구에서 보면 아래와같이 rect 태그에 animate 속성이 추가된 것을 볼 수 있다.

예쁘지 아니한가? 애니메이션효과는 다음장에서 다루도록 합시다. 직접 한번 해보고. 스타일은 각자 맘에 드는형태로 해보아요~ d3.js 를 사용했습니다. http://mbostock.github.com/d3/

막대바의 width 값이 0 에서 100까지 1초동안 애니메이트 된다. 정말 간단한 예제임. 이걸 응용한다면 차트까지도 만들 수 있겠지 bar Note: This example only works in Firefox and Google Chrome. repeatCount="indefinite" 속성을 animate에 넣어주면 계속 반복된다. column 컬럼은 나중에 다시...

아까 소개했던거보다는 조금 복잡함.. API를 가급적 다 확인해야 할 필요가 있음.. http://raphaeljs.com/

그림판 구현이라던지. 게임처럼 아주 세세하게 컨트롤 하려면 Canvas를 쓰고 아니면 어지간한건 SVG를 사용하는게 좋다. 잡담은 여기까지.. http://mbostock.github.com/d3/

http://www.codedread.com/blog/archives/2009/06/19/embed-an-svg-editor-on-your-web-page/ 아이프레임에 넣어서 같다가 쓸수도 있다.