SVG로 멋진 동적 아이콘을 만드는 방법(코드 예)

이 장에서는 SVG를 사용하여 HTML5에서 멋진 동적 아이콘을 만드는 방법을 소개합니다(코드 예제). 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 기본 그래픽 요소

svg에는 미리 정의된 모양 요소가 있습니다: 직사각형 ;, 원형 , 타원, 직선, 폴리라인, 다각형, 경로 및 텍스트입니다.

2. 스타일 및 효과

svg 요소의 스타일은 속성으로 작성할 수 있습니다. 태그 또는 스타일에 따라 작성됩니다. 다음은 몇 가지 주요 스타일 속성입니다:

획: 획 색상
스트로크 너비: 스트로크 너비
획 불투명도: 획의 투명도
채우기: 색상 채우기, 즉 배경
채우기 불투명도: 채우기 색상의 투명도
변환: CSS3 변환과 유사한 그래픽 변환

svg은 그라디언트, 그림자, 흐림, 이미지 혼합 등을 포함한 다양한 필터 효과도 지원합니다. 예를 들어, 여러 가지 색상의 원을 그리려면 원을 사용하고 채우기만 하면 됩니다.

참고: 변환은 기본적으로 원의 중심이나 다른 중심이 아닌 svg의 왼쪽 위 모서리를 기준점으로 설정됩니다. 왼쪽 위 모서리는 svg 좌표계의 원점입니다. 변환 및 좌표계를 이해하려면 여기를 참조하세요.

3. 보조 요소

svg에는 여러 가지 보조 요소가 있습니다: <기호> <사용> 특정 모양을 나타내지는 않지만 그래픽 요소의 그룹 관리, 재사용 등에 도움이 됩니다. 자세한 소개는 여기에서 확인하실 수 있습니다.

요소는 일반적으로 회전, 크기 조정 또는 관련 스타일 추가와 같은 통합 작업을 위해 관련 그래픽 요소를 그룹화하는 데 사용됩니다.
기존 SVG 그래픽의 재사용을 실현합니다. 단일 SVG 그래픽 요소 또는 로 정의된 그룹 요소를 재사용할 수 있습니다.
내부적으로 정의된 요소는 미리 스타일을 정의할 필요가 없지만 를 사용하여 인스턴스화할 때 정의합니다.
은 의 그룹화 기능과 의 초기 보이지 않는 기능을 갖는 자체 창을 만들 수 있습니다.

위에 언급된 변환 기준점 문제의 경우 태그를 중첩하고 위치를 오프셋하여 기준점을 재설정할 수 있습니다. 다음과 같이 가로로 배열된 여러 개의 원을 그리고 다양한 확대/축소 크기 설정

4. 애니메이션 구현

svg는 애니메이션 태그 요소를 기반으로 합니다.

단일 속성의 전환 효과를 얻으려면;
변형 애니메이션 효과 구현
경로 애니메이션 효과를 얻을 수 있습니다.

svg의 작성 방법은 매우 유연합니다. 스타일은 태그 속성으로 작성하거나 스타일에 작성할 수 있습니다. 애니메이션 태그는 xlink를 통해 요소를 지정하거나 애니메이션 요소 내에 작성할 수 있습니다. 다음은 animateTransform의 xlink 작성 방법을 보여줍니다.

위 예의 애니메이션은 A에서 B로의 전환입니다. 원활한 순환을 형성하려면 최소 3개의 핵심 지점을 정의해야 합니다. animateTransform은 보다 유연한 속성 설정을 지원합니다.

values: 여러 키 포인트의 값(value="0;1;0"과 같이 시작 및 끝으로 대체)

keyTimes : 값에 해당하며 각 지점의 시점

calcMode: 애니메이션 속도 모드. 이산 | 선형 | 스플라인

keySplines: calcMode가 스플라인일 때 유효한 모션 베지어 제어점 설정

#

위 내용은 SVG로 멋진 동적 아이콘을 만드는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!