EverGiver

클립패스 클리핑 처리할 요소 clip-path 속성에 요소 ID를 참조하면 클리핑 처리 된다. - 클리핑 마스크 클립 영역 패스를 정의한다. svg lesson svg lesson css 속성 활용 AOA 2022

Gradient 그래디언트(gradient)는 하나의 색상에서 다른 것으로 부드러운 전환을 의미한다. - 선형 그러데이션을 정의하는 데 사용 - 태그 내에 중첩되어야 한다. - 수평 gradients 는 y1과 y2는 동일하며, x1과 x2는 차이가 있을 때 생성 - 수직 gradients 는 x1과 x2는 동일하며, y1과 y2는 차이가 있을 때 생성 - 경사(angular) gradients 는 x1과 x2는 차이가 있으며, y1과 y2 도 차이가 있을 때 생성 - 태그의 id 속성은 그라데이션의 고유한 이름을 정의 - 태그의 x1, x2, y1,y2 속성은 그러데이션의 시작 및 끝 위치를 정의 - 그라데이션 색상 범위가 둘 이상의 색으로 구성될 수 있으며 각 색상은 태그로 지정 - offset 속성..

이미지 마스크 내부에 요소를 선언하고, 식별 가능한 id 속성을 부여한다. 요소 mask 속성 값으로 url() 함수를 사용해 마스크 ID를 설정하면 마스킹된 이미지가 화면에 렌더링 된다. 주의할 점은 마스크는 Alpha Channel을 사용하므로 하얀색(#fff)일 경우 Opacity 100%와 같고, 검은색(#000) 일 경우 Opacity 0%와 같다. mask-text SVG LESSON 마스크(mask)와 클립패스(clipPath)의 차이점 - 마스킹은 마스크의 투명도 및 회색 값을 고려하여 부드러운 가장자리를 허용한다. - 클리핑은 다른 파트에서 정의한 요소의 일부를 제거하는 것을 의미한다. (이 경우 모든 반투명 효과는 불가능)

Animation의 주요 속성 애니메이션 요소의 이름 속성 - attributeName : 애니메이션 하고자 하는 속성의 이름 - attributeType = "CSS | XML | auto" ▷ CSS : CSS 스펙에 정의된 속성 (fill, visibility,...) ▷ XML : XML namespace로 정의된 속성 (x, y, width, height, transform,...) ▷ auto : 속성의 타입을 먼저 CSS에서 찾고 없으면 XML에서 찾는다. 시간제어 속성 - begin = "시간", end = "시간" - dur = "clock 시간 | indefinite | media" - restart = "always | never" - repeatCount = "횟수" - repeat..

Perspective (원근감) perspective perspective() 유형 속성 메서드 작성 위치 부모 자신 사용 방법 perspective: 값 transform:perspective(값) transform:perspective() - 3D 공간에서 요소와 관측 점과의 거리(원근감)를 지정하는 속성 - 값이 작을수록 가깝게 보이고, 멀수록 멀게 보인다. perspective - 속성은 부모에게 사용하고, 적용 범위는 자식에게만 가능 - perspective-origin을 사용할 수 있다. transform:perspective()와 perspective의 차이 - transform:perspective()의 경우 관찰자가 사물을 한꺼번에 본다. - perspective의 경우 관찰자가 사물을 ..

SVG 요소는 텍스트로 구성된 그래픽 요소를 그린다. 속성 x - 텍스트 기준선 시작점의 x 좌표 y - 텍스트 기준선 시작점의 y 좌표 hello svg dx - 이전 텍스트 요소에서 텍스트 위치를 수평으로 이동 dy - 이전 텍스트 요소에서 세로로 텍스트 위치를 이동 rotate - 글자마다 회전을 시킬 수 있다. - 설정한 회전 값 개수와 글자 수가 일치하지 않으면, 별도의 값이 설정되지 않은 글자는 마지막 설정 값을 따른다. svg lesson3 lengthAdjust - 글자 간격, 글리프 크기가 텍스트 길이에 맞게 조정되도록 설정 ▷ spacing : 글자 간격의 공간을 채우기 위해 조정 ▷ spacingAndGlyphs : 글자 간격뿐만 아니라 글리프 크기까지 조정 textLength - 텍..