[SVG] SVG Properties and CSS

HYl·2022년 3월 21일
0

SVG에는 인라인 SVG 코드가 길고 복잡해질 수 있을 정도로 자체 요소, 속성이 있다. CSS와 SVG의 몇 가지 기능을 활용함으로써 코드를 줄여 보다 깔끔한 마크업을 실현할 수 있다.

Scalable Vector Graphics(SVG) 는 많지만 SVG에 CSS로 적용할 수 있는 것은 특정 속성뿐이다.

예를 들어, 요소의 색상을 빨간색으로 변경하려면 CSS에서 fill 속성을 사용한다.


Positioning SVG elements

SVG 에서는 CSS를 사용하여 SVG 요소를 배치할 수도 있다. 다음은 SVG로 그린 직사각형 모양이다.

css 를 사용하여 x, y 의 위치 값과 width, height 를 설정했다.


SVG shape morphing

d 속성을 사용하면 요소의 모양을 지정할 수 있다.


Animating SVG properties

SVG 속성은 CSS animationstransitions 을 통해 CSS를 사용하여 애니메이션화할 수 있다.

  • cxcircleellipse 엘리먼트에서 사용될 경우, 본 속성은 엘리먼트의 중심의 x축의 위치를 나타낸다. 속성이 정의되어있지 않을 경우 속성 값이 "0"일 경우와 동일한 형태를 나타내게 된다.
  • circle(원) 은 엘리먼트는 중심점과 반지름에 기초하여 을 생성하는데 사용되는 SVG의 기본 모양이다.
  • cy 중심점의 y축 좌표를 정의한다.

그러면 각 요소가 cy 좌표를 50에서 150으로, r은 20에서 13으로 변경할 수 있다. moveCircle animation CSS에 추가하여 .shape 클래스에 애니메이션을 무한대로 실행한다.

SVG <pattern> elements

  • defs 요소는 나중에 사용할 그래픽 개체를 저장하는 데 사용된다.
  • pattern 요소는 영역을 덮기 위해 반복되는 x 및 y 좌표 간격("바둑판식")으로 다시 그릴 수 있는 그래픽 개체를 정의한다.
profile
꾸준히 새로운 것을 알아가는 것을 좋아합니다.

0개의 댓글