Loading.io 에서 볼 수 있는 놀라운 로드 아이콘은 모두 SVG 로 작성되었으며, 몇 줄의 코드만 있어 img 그림보다 더 정교하고 부피가 절약되며 순수 DOM 구현보다 더 유연하고 효율적입니다. 또한 아이콘을 클릭 이벤트에 응답할 수 있습니다.
이 원과 정사각형은 어떻게 그려요? 어떻게 색칠합니까? 어떻게 이사합니까? 먼저 SVG 의 기초를 보고 위에 첫 번째 아이콘을 그립니다.
첫째, 기본 그래픽 요소 SVG 에는 미리 정의된 모양 요소인 직사각형이 있습니다
1< ! -viewBox 캔버스 크기 정의 폭/높이 실제 크기 정의->
2< SVG xmlns = "http://www.w3.org/2000/SVG" version = "1../kloc-
셋；삼；3
4<! -선 (x 1, y 1) 및 (x2, y2) 는 2 점 좌표입니다->
5 & ltline x1= "0" y1= "0" x2 = "250" y2 = "30"/>
여섯；육
7<! -다각형은 여러 점의 좌표로 닫힌 모양을 형성합니다->;
8< 다각형 점 = "5,5100,100 50,200"/>
아홉；구；9
10 < ! -직사각형 (x, y) 은 왼쪽 위 모서리의 시작점입니다->
11< Rect x = "100" y = "100" width = "120" height = "/
12
13 < ! -R 중심 반지름 (CX, cy)-& gt；;
14 < Circle CX = "100" cy = "50" r = "40" stroke = "black"/>
15
16 < ! -왼쪽 아래 구석의 텍스트 (x, y) 좌표->
17 < Text x = "0" y = "20" style = "font-size:16px; Font-weight: bold "> SVG & lt/text & gt；; 1819 < /SVG > 둘째, 스타일과 효과 SVG 요소의 스타일은 태그의 속성이나 style 로 쓸 수 있습니다. 다음은 몇 가지 주요 스타일 속성입니다.
선: 선 색상
선 너비: 선 너비.
획 불투명도: 획의 투명도
채우기: 채우기 색상, 즉 배경입니다.
칠 불투명도: 칠 색상의 투명도입니다.
변환: css3 변환과 유사한 그래픽 변환입니다.
Svg 는 그라디언트, 그림자, 흐림, 이미지 혼합 등 다양한 필터 효과도 지원합니다. 그렇게 많은 것을 알 필요가 없다. 예를 들면 색칠 원을 몇 개 그리는 것과 같이, circle with fill 을 사용하면 된다.
참고: 기본적으로 변환은 중심점이나 다른 중심이 아닌 SVG 의 왼쪽 위 모서리를 기준으로 합니다. 왼쪽 위 모서리는 SVG 좌표계의 원점입니다. 변환과 좌표계를 이해하려면 여기서 참조할 수 있습니다.
셋째, 보조 요소 SVG 에는 몇 가지 보조 요소가 있습니다.
& ltg> 요소는 일반적으로 회전, 축척 또는 관련 스타일 추가와 같은 통합 작업을 위해 관련 그래픽 요소를 그룹화하는 데 사용됩니다.
& lt 사용> 기존 SVG 그래픽을 재사용하려면 개별 SVG 그래픽 요소 또는
& ltdefs & gt 내에 정의된 요소는 직접 표시되지 않으며 사용할 수 있습니다
& ltsymbol & gt 는 자체 창을 만들 수 있습니다
위에서 언급한 변환 기준점 문제의 경우 중첩할 수 있습니다
1< Svg width = "80px" height = "80px" xmlns = "http://www.w3.org/2000/SVG" viewbox =
2<g transform="translate(20 50) ">
3 & ltcirclecx = "0" cy = "0" r = "7" fill = "# e15b64" transform = "scard
4 & lt/g & gt；;
5<g transform="translate(40 50) ">
6 & ltcirclecx = "0" cy = "0" r = "7" fill = "# f47e60" transform = "scale (0.773605 0.777
7 & lt/g & gt；;
8<g transform="translate(60 50) ">
9 & ltcirclecx = "0" cy = "0" r = "7" fill = "# f8b26a" transform = "scale (0.42525 0.4255
10 < /g >
11< G transform="translate(80 50) ">
12 < Circle CX = "0" cy = "0" r = "7" fill = "# abbd81"transform = "scale (0)
13 < /g >
14 < /SVG > 넷째, 애니메이션의 실현. Svg 의 애니메이션 효과는 애니메이션 태그 요소를 기반으로 합니다.
& ltanimate & gt 는 단일 속성의 전환을 구현합니다.
& ltanimateTransform & gt 변환의 애니메이션 효과를 구현합니다.
& lt 애니메이션 감정 및 gt 경로 애니메이션 효과를 달성하기 위해.
Svg 는 유연하게 작성할 수 있습니다. 스타일은 레이블 속성으로 쓰거나 스타일에 쓸 수 있습니다. 애니메이션 태그는 xlink 를 통해 요소를 지정하거나 애니메이션 요소 내부에 쓸 수 있습니다. AnimateTransform 의 xlink 제작 데모는 다음과 같습니다.
& lt svgxmlns = "http://www.w3.org/2000/SVG" >
& ltrect id = "animateobject" x = "20" y = "20" width = "50" height = "50" fill = "blue & lt/rect & gt；;
& lt 애니메이션 변형
Xlink: href = "# animateobject" < ! -애니메이션 요소 지정->
AttributeName = "transform"<! -애니메이션이 필요한 속성의 이름->
Type = "scale"<! -변환 속성 지정->
Begin = "0s"<! -시작 시간, 즉 지연->
Dur = "3s"<! -애니메이션 시간->
시작 = "1"< ! -시작 값->
To = "2"<! -끝 값->
RepeatCount = "indefinite"<! -반복, 무한 반복->
/>
& lt/SVG & gt；; 위 예의 애니메이션은 A 에서 B 로의 전환이며 부드러운 루프를 형성하려면 최소한 세 개의 키를 정의해야 합니다. AnimateTransform 은 점점 더 유연한 속성 설정을 지원합니다.
Values: from 및 to 대신 다중 키의 값 (예: values = "0；; 1; 0 "
키 시간: 해당 숫자 값, 각 지점의 시간 단계입니다.
CalcMode: 애니메이션 속도 모드. 이산 | 선형 | 스텝 | 스플라인
Keysplines: 베지어 모션 제어점을 설정합니다. calcMode 가 스플라인인 경우 유효합니다.
Svg 애니메이션에 대한 자세한 소개는 여기를 참조하십시오.
동사 (verb 의 약어) 코드 예
Circle 은 원을 그리고, 색으로 채우고, G 레이블로 감싸서, 위치한다. Transform 은 초기 변형을 설정하고 animateTransform 은 애니메이션합니다. 이제 코드를 보세요. 더 이상 혼란스럽지 않을 겁니다.
& lt SVG class = "LDS-message" width = "80px" height = "80px" xmlns = "http://www.w3"
& ltg transform="translate(20 50) ">
& ltcirclecx = "0" cy = "0" r = "7" fill = "# e15b64" transform = "scale"
& lt animate transform attributename = "transform" type = "scale" begin = "-0.375s" calcmode = "splining 0.3 0 0.71"values =" 0; 1; 0 "키 시간 =" 00.5; 1"dur ="1s "repeatcount =" infinite "></animatetransform & gt"
& lt/circle & gt；;
& lt/g & gt；;
& ltg transform="translate(40 50) ">
& ltcirclecx = "0" cy = "0" r = "7" fill = "# f47e60" transform = "scale (0.773605 0.773600
& lt animate transform attributename = "transform" type = "scale" begin = "-0.25s" calcmode = "spline 0.3 0 0.71"values =" 0; 1; 0 "키 시간 =" 00.5; 1"dur ="1s "repeatcount =" infinite "></animatetransform & gt"
& lt/circle & gt；;
& lt/g & gt；;
& ltg transform="translate(60 50) ">
& ltcirclecx = "0" cy = "0" r = "7" fill = "# f8b26a" transform = "scale (0.42525 0.42525)
& lt animate transform attributename = "transform" type = "scale" begin = "-0.125s"; 0.3 0 0.71"values =" 0; 1; 0 "키 시간 =" 00.5; 1"dur ="1s "repeatcount =" infinite "></animatetransform & gt"
& lt/circle & gt；;
& lt/g & gt；;
& ltg transform="translate(80 50) ">
& ltcirclecx = "0" cy = "0" r = "7" fill = "# abbd81"transform = "scale (
& lt animate transform attributename = "transform" type = "scale" begin = "0s" calcmode = "spline" kr 0.3 0 0.71"values =" 0; 1; 0 "키 시간 =" 00.5; 1"dur ="1s "repeatcount =" infinite "></animatetransform & gt"
& lt/circle & gt；;
& lt/g & gt；;
& lt/SVG & gt；; 관련 권장 사항:
JS SVG 그림을 조작하는 방법