본문 바로가기

Webstoryboy

Category

Explanation

SVG

(80)
[SVG] <feDistantLight> 요소는 요소는
[SVG] <feDisplacementMap> 요소는 요소는
[SVG] <feDiffuseLighting> 요소는 요소는
[SVG] <feConvolveMatrix> 요소는 요소는
[SVG] feComposite 요소는 요소는
[SVG] <feComponentTransfer> 요소는 데이터의 색 구성 요소별 매핑을 정의합니다. 요소는 데이터의 색 구성 요소별 매핑을 정의합니다.
[SVG] <feColorMatrix> 요소는 변형 행렬을 기반으로 색상을 변경합니다 요소는 변형 행렬을 기반으로 색상을 변경합니다
[SVG] <feBlend> 요소는 블랜딩 모드를 정의합니다. 요소는 블랜딩 모드를 정의합니다.
[SVG] <ellipse> SVG 기본 모양으로 중심 좌표 x와 y를 기반으로 타원을 만드는 데 사용합니다. 요소는 타원을 그립니다. 정의(Definition) 요소는 타원을 만들 때 사용합니다. 요소는 중심 좌표 x와 y를 기반으로 타원을 만듭니다. 속성(Property) 속성 설명 cx 타원 중심 좌표의 x축 값을 설정합니다. cy 타원 중심 좌표의 y축 값을 설정합니다. rx 타원의 x축 반지름 값을 설정합니다. ry 타원의 y축 반지름 값을 설정합니다. 1. 타원형 SVG를 이용한 타원형입니다. Sample1 CSS .svgBox .svg {width: 160px; height: 160px; background: #ffebee;} .ellipse1 { fill: #f48fb1; cx: 80; cy: 80; rx: 60; r..
[SVG] discard 요소는 삭제할 시간을 정의합니다. 요소는 삭제할 시간을 정의합니다.
[SVG] <desc> 요소는 긴 텍스트 설명을 제공합니다 요소는 SVG 컨테이너 요소 또는 그래픽 요소에 대한 긴 텍스트 설명을 제공합니다
[SVG] <defs> 요소는 나중에 사용될 그래픽 객체를 저장하는데 사용됩니다. 요소는 나중에 사용될 그래픽 객체를 저장하는데 사용됩니다.
[SVG] <color-profile> 요소는 이미지에 사용된 색상 프로파일을 정의합니다. 요소는 이미지에 사용된 색상 프로파일을 정의합니다.
[SVG] clipPath 요소는 클립 패스를 정의합니다. 요소는 클리핑 마스크의 클립 영역 패스를 정의합니다. 정의(Definition) 요소는 클리핑 마스크의 클립 영역 패스를 정의합니다. 1. clipPath SVG를 이용한 clipPath입니다. Sample1 HTML CSS .svgBox .svg {width: 160px; height: 160px; background: #ffebee;} TOTAL 호환성(Compatibility) 더보기 caniuse.com 6 7 8 9 10 11 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 참고(Reference) MDN SVG CSS Masking Module Level 1
[SVG] <circle> 요소는 원을 그리는 SVG 기본 모양입니다. 중심점과 반지름을 기준으로 원을 표현합니다. 요소는 원을 그립니다. 정의(Definition) 요소는 SVG 기본 모양으로 중심점과 반지름을 기준으로 원을 그리는데 사용됩니다. 속성(Property) 속성 설명 cx 원 중심의 x축 좌표 값을 설정합니다. cy 원 중심의 y축 좌표 값을 설정합니다. r 원의 반지름 값을 설정합니다. 1. 사각형 SVG를 이용한 사각형입니다. Sample1 CSS .svgBox .svg {width: 160px; height: 160px; background: #ffebee;} .circle1 { fill: #f48fb1; cx: 80; cy: 80; r: 60; } .circle2 { fill: #f48fb1; cx: 80; ..
[SVG] <animateTransform> 요소는 애니메이션을 정의합니다. 요소는 변화, 크기, 회전, 기울기 애니메이션을 정의합니다.
[SVG] <animateMotion> 요소는 모션 경로에 따라 애니메이션을 정의합니다. 요소는 모션 경로에 따라 애니메이션을 정의합니다.
[SVG] <animate> 요소는 애니메이션을 정의합니다. 요소는 애니메이션을 정의합니다.
[SVG] <a> 요소는 SVG의 하이퍼링크를 정의합니다. HTML의 태그와 비슷합니다. 요소는 하이퍼링크를 정의합니다.
[SVG] SVG SVG SVG(Scalable Vector Graphics)는 2차원 기반의 벡터 그래픽 마크업 언어입니다. SVG는 그래픽을 표현하기 위한 방식입니다. SVG는 텍스트 기반의 표준 방식이며, XML을 바탕으로 설정되어 있으며, 검색, 인덱싱, 스크립트 및 압축이 가능합니다. 또한 SVG는 에디터와 일러스트의 벡터 방식의 소프트웨어에서도 작성할 수 있습니다. SVG는 1999년 W3C(World Wide Web Consortium)에서 개발한 공개 표준입니다.
1 2 3