path로 사각형을 그린다.
모서리 부분은 둥글게 하면서, 이를 위해 svg 에서는 arc 를 그리는 명령어 A,a 를 사용한다.
직선을 그리는 L,ㅣ 명령어와 함께 사용함으로써,다음 그림과 같이 표현된다.
path이므로 애니메이션으로 변형을 자유롭게 할 수 있다.
네모서리가 터지는 그림을 보자.
이렇게 쉽게 변이가 가능하다.
회전하는 그림은 클릭으로 정지 가능하다.
반응형
'svg' 카테고리의 다른 글
| css animation : position property (0) | 2023.11.15 |
|---|---|
| svg animation : bezier curve (0) | 2023.11.09 |
| svg rounded rectangle ; animation (0) | 2023.11.08 |
| svg animation : bee animation using javascript (0) | 2023.11.07 |
| svg paint ; 마우스 이벤트와 터치 이벤트를 이용하여 간단한 그림판을 만들어 보자. (0) | 2023.11.03 |
