전체 글199 svg rounded rectangle ; animation 사각형을 그리는 것은 쉽다. 그러나 모서리 부분을 둥글게 하는 것은 어떻게 할까? 이를 위해 svg 에서는 arc 를 그리는 명령어 A,a 가 존재한다. 직선을 그리는 L,ㅣ 명령어와 함께 사용함으로써,다음 그림과 같이 표현된다. 애니메이션을 이용하여, 변형도 자유롭게 할 수 있다. 이것이 svg의 장점이다. 회전하는 그림은 클릭으로 정지 가능하다. 2023. 11. 8. svg animation : bee animation using javascript 가로 세로 200,200 인 사각형 속에 원으로 중심을 표현하고,한마리의 벌을 붙혀 회전을 시켜보자. 시계방향으로 ,반시계반향으로... 자바스크립트로 애니메이션 객체를 생성,속성을 적당히 부여하여 그룹화된 객체들의 형제로 등록시켜서 애니메이션을 한다. 그룹에 클릭이벤트를 등록하여,"active" className을 제거,또는 추가를 하여 애니메이션을 정지 또는 실행한다. 2023. 11. 7. svg paint ; 마우스 이벤트와 터치 이벤트를 이용하여 간단한 그림판을 만들어 보자. svg 캔버스를 이용하여 자유롭게 낙서를 할 수 있는 칠판을 만들어 보자. 컨테이너인 svg에 뷰포트를 width="400" height="400" 으로 주고, 뷰박스는 viewBox="0 0 400 400" 그리고 경계를 위한 스타일을 주었다. 이벤트 리스너들을 작성하여 svg에 부착하여, 마우스 또는 터치를 이용하여 자유롭게 그릴 수 있다. 랜덤하게 색깔을 선택하게 된다. refresh를 하면 다른 색깔로 그릴 수 있다. 또는 ctrl + f5 단축키를 사용할 수 있다. 2023. 11. 3. event 3 phases ; 간단한 HTML DOM 구조를 보면서 세가지 국면(phase)을 거치는 이벤트 흐름을 용어와 함께 이해한다. 간단한 HTML DOM 구조를 보면서 세가지 국면(phase)을 거치는 이벤트 흐름을 용어와 함께 이해한다. 이벤트가 발생한 곳으로 잡으러 가면서 무언가를 처리하는 경우 그 곳에 도착한 후 처리를 하고, 돌아 가면서 또 무언가를 처리할 수 있다. windowwindow#document#documentzz1.capture phase1.capture...3.bubbling phase3.bubbling...2.targeting phase2.targetin...Text is not SVG - cannot display 2023. 11. 1. 이전 1 ··· 22 23 24 25 26 27 28 ··· 50 다음
