분류 전체보기184 svg animation; mutation path로 사각형을 그린다. 모서리 부분은 둥글게 하면서, 이를 위해 svg 에서는 arc 를 그리는 명령어 A,a 를 사용한다. 직선을 그리는 L,ㅣ 명령어와 함께 사용함으로써,다음 그림과 같이 표현된다. path이므로 애니메이션으로 변형을 자유롭게 할 수 있다. 네모서리가 터지는 그림을 보자. 이렇게 쉽게 변이가 가능하다. 회전하는 그림은 클릭으로 정지 가능하다. 2023. 11. 8. 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. 이전 1 ··· 18 19 20 21 22 23 24 ··· 46 다음
