[SVG] svg 기초

기본

rect : 사각형

• x, y
• rx, ry : 꼭지점의 반지름 (radius)

circle : 원형

• cx, cy : 원의 x,y 거리
• r : 반지름

ellipse : 타원형

• cx, cy :타원의 x,y 거리
• rx, ry : 타원의 넓이, 높이

link : 직선

• x1, y1 : 직선의 출발지점
• x2, y2 : 직선의 끝

polyline : 이어지는 직선, 첫 점과 끝 점이 안이어짐

• points: x y, x y, x y,.....xy값을 점마다 찍으면 연결해줌

polygon : 이어지는 직선, 첫점과 끝 점이 이어짐

• points: x y, x y, x y,.....xy값을 점마다 찍으면 연결해줌

path : 자유로운 그리기

• d : 선의 위치를 지정해주는 속성
  • M(move) : x y 시작점
  • L(line) : x y 직선 어디로 그을 지
  • H(horizon) : 가로직선
  • V(vertical) : 세로직선
  • Z : 끝 점과 첫 점을 이을지 여부
  •  

속성

 

<![CDATA[ 코드 ]]> 

svg안에 js나 css코드를 사용할 경우 parser에서 오류가 날 수있으므로 꼭 위의 코드써줘야한다.

---

곡선에 글씨 쓰기

defs : 참조할 그래픽 요소를 담아놓는 그릇, 존재는 하나 눈에 보이지않음

대표적으로 마스크나 곡선에 글자를 얹는 경우 사용

defs안의 태그에 id를 줘서 연결함

 

textPath : text태그 안에 를 넣어 곡선안에 얹을 글자를 작성 연결은 href

 

 

See the Pen Untitled by EuraKo (@eurako) on CodePen.

 

 

 

 

글자 부분 스타일링은 tsapn태그 활용

---

GRADIENT - 그라디언트 주기

그라디언트의 종류 : linearGradient, radialGradient

<object data="rainbow.svg" type=""></object>

rainbow.svg

See the Pen Untitled by EuraKo (@eurako) on CodePen.

 

 

PATEERT - 패턴 만들기

• defs안에 pattern태그를 사용
• pattern태그의 width값과 height는 백분율이다.
• svg태그에 직접 css를 주는거는 패턴이 고정된 값으로 움직이므로 viewBox를 주면 반응형 작업을 할수있다.
• 아래의 예시처럼 viewBox가 1000*1000사이즈로 주면 패턴안의 width값이 0.1일때 100의 값을 갖는다.
• 이를 svg 넓이 높이를 주면 viewBox는 1000*1000을 해당사이즈에 맞게 비율을 조정해준다.

See the Pen svg pattern by EuraKo (@eurako) on CodePen.

 

 

 

ANIMATION - 애니메이션

svg파일에서 style에 애니메이션을 주면된다.

css에 background-image에 svg를 넣으면 반복 배경을 만들 수 있다.

 

See the Pen svg pattern animation by EuraKo (@eurako) on CodePen.

 

 

background이미지에 넣은 보라하트

MASK - 마스크씌우기

• 마스크에 들어가는 도형은 색이 흰색이여야 보인다. 어두울 수록 투명도가 들어감
• 투명도가 #fff가 100%로면 #000은 0%
• defs안에 mask태그를 추가 하여 id를 주고 그안에 mask씌울 도형을 넣어준다
• g태그에 mask컨텐츠를 넣어주고 mask속성을 줘서 mask id를 연결

 

See the Pen svg mask by EuraKo (@eurako) on CodePen.