svg 컨테이너 요소
•
svg는 왜 nesting해야 하는지 사례가 궁금하다.
정확히 궁금한 게 svg가 최상위일 때 안에 svg랑 다른 버전을 가질 수 있는지
1.1, 2.0
⇒ 저는 새로운 좌표계를 넣는다는 느낌으로 이해했어요.. svg 자체가 viewbox를 설정할 수 있는데 네스팅된 svg는 해당 svg만의 좌표계를 사용할 수 있는 느낌..
⇒ svg 버전은 deprecated되었음.
SVG, Canvas, viewport, viewBox
MDN 위주
svg와 캔버스 비슷하지만 차이가 있다.
viewBox? 보여지는 영역. 내부 요소 각각을 뷰박스로 정의할 수 있다. css flex를 써보면 이해가 쉬운 비유인데 container가 밖에 있고 안에 item이 있을 때 어떻게 배치할지에 대한 속성을 설명할 때 컨테이너가 뷰박스고 아이템이 요소들이다.
preserveAspectRatio
뷰박스가 있는 요소의 주어진 양상 비율을 결정하는 것
“xMinyMid meet(스마일이 그대로보여지는)”
2개의 그룹으로 보면 된다.
x값에 최대값을 줄 수 있는 경우에 스마일이 오른쪽에 쏠리게 된다. xMaxyMid meet
스마일은 직사각형보다 크기가 크다. 그래서 잘리면서 보여지는 게 slice
xMidyMid slice면 둘다 가운데로 잘라서 보여줌
튜토리얼 쳐도 반영이 안되서 코샌 들어가서 해야 함
svg 트리만들기, 캔버스 원 만들기
•
canvas vs svg에서 canvas는 픽셀수가 많을 때 유용하다고 적혀져 있는데 왜 그런지 잘 이해가 안 가서 혹시 해당 부분을 조금 더 설명해주실 수 있으신가요? 어떤 블로그에서는 canvas는 object 수가 많을 때 적합하다 라고 적혀져 있기도 하더라고요.
⇒ xml로 각 요소를 하나하나 그리는 게 svg인데, 캔버스는 js로 코딩하는 것. 자동화나 for문 사용이 가능해서 반복적인 부분에 대한 작업을 줄일 수 있어서라고 생각한다.
⇒ 제 생각에 svg 가 복잡하고 많으면 dom 에 영향을 줘서 그런것 아닐까요오?
⇒
SVG는 “그리기”프로그램과 같습니다. 드로잉은 각 모양에 대한 드로잉 지침으로 지정되며 모든 모양의 일부를 변경할 수 있습니다. 드로잉은 모양 지향적입니다.
캔버스는 “페인트”프로그램과 같습니다. 픽셀이 화면에 닿으면 그것이 바로 당신의 그림입니다. 다른 픽셀로 덮어 쓰는 것 외에는 모양을 변경할 수 없습니다. 그림은 픽셀 지향적입니다.
일부 프로그램에서는 도면을 변경할 수있는 것이 매우 중요합니다. 예를 들어 드 래프팅 앱, 다이어그램 작성 도구 등. 따라서 SVG는 여기에서 이점이 있습니다.
도형, paths로 도형 그리기
이들은 그래픽스 엘리먼트라 부른다.(컨테이너 엘리먼트와 다른)
컨테이너는 재사용 같고, 이건 직접 그리는 것
path로 나머지를 다 만들 수 있는 수학적 동치
동치가 아니면 리렌더링하거나 애니메이션 효과가 어렵다.
두개가 있을 때 하나로 보인다.
rect
ry가 크면 y축이 부드럽게 그려진다.
circle
fill=”none” stroke=”black” // property attributes
ellipse
ry가 더 크니 y방향이 많이 휘어져있다.
line
끝점의 좌표 x,y를 줘서 선을 그릴 수 있다.
polyline
list of points의 좌표는 홀수개로 넣을 때 에러가 된다.
polygon
다음 좌표를 계속 준다. 끝 좌표가 생략된 폴리라인과 동일. 즉, 마지막에 선을 이어 마감해준다.
path
모든 도형 엘리먼트들을 만들 수 있는 기본.
M,
C : 조절점.
S : 리플렉션
d 속성
z로 path를 닫아 삼각형을 만드는 예제
C, S는 시작점과 끝점의 조절점을 입력해야 함
Q는 하나의 조절점으로 할 수 있음
T는 끝점만 명시하는 방법
A로 호를 그리기
pathLength?
text path나 애니메이션 계산에 중요하다고 한다.
path의 길이를 계산해주는 것.
예시) Q에 대한 조절점을 변경. y 좌표만 랜덤으로 변경함.
예시) 동치관계에서는 애니메이션이 자동으로 적용되는데? 삼각형과 꺾새라면 안된다.(즉, 동치여야 된다.)
예시) path를 조작해서 자연스럽게 애니메이션을 전환시키는 것을 목표로 하면 좋을 것 같다.
path에서 소문자 m,l이면? 상대경로라고 하는데,
소문자 h가 되면 뷰박스 기준부터 horizontal 200을 그리는 것이 아니라 가장 최근 지점을 0,0으로 생각하고 200을 그리게 된다.
⇒ 좌표위치라기보다 width, height 크기로 보는게 좋겠네요
⇒ css position 속성 absolute, relative랑 비슷한 것 같네요
질문?
질문은 기존에는 Repo의 이슈로 생성했었는데 오늘 스터디 이후에 레포 생성, 초대 완료후에 혹시 이슈로 생성
만약에 스터디 진행 중간에 스터디 발표 와 별개로도 궁금한 부분이 생기면 이슈 생성하는 것도 좋은 것 같습니다. 자유롭게 의문이 드는 부분 모두에 이슈 생성해서 다같이 토론하며 해결하는 것이 좋을 것 같습니다.
다음주부터는 포크해서 마크다운 올리는 걸로
4번째, Figma로 SVG 다루기
예시가 되는 애니메이션을 보여주고, 어떻게 쓴다. 애니메이션에서 알아야되는 것들을 짚어야될 거 같다.(3번을 2개로 나눈 이유다.)
•
1번 주제 괜찮을까요?! 좀 범위가 커보여서요~
⇒ SMIL? 주로 CSS, JS일 것이라 비교하는 느낌으로.
사실 내용의 복잡도를 잘 모르기 때문에 최대한 따라가는 게 나을 것 같음..
4명,오다혜 제외 랜덤 분배
오프라인 세션 준비
