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

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

1. 기본 그래픽 요소

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

<!-- viewBox定义画布大小 width/height定义实际大小 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="0 0 300 300">

    <!-- 直线 (x1,y1)与(x2,y2)为两点坐标 -->
    <line x1="0" y1="0" x2="250" y2="30" />

    <!-- 多边形 通过多个点的坐标形成封闭图形 -->
    <polygon points="5,5 100,100 50,200" />

    <!-- 矩形 (x,y)为左上角起始点 -->
    <rect x="100" y="100" width="120" height="100" />

    <!-- 圆形 (cx,cy)圆心点 r半径 -->
    <circle cx="100" cy="50" r="40" stroke="black"/>

    <!-- 文本 (x,y)左下角坐标  -->
    <text x="0" y="20" style="font-size:16px;font-weight: bold">Try SVG</text>

</svg>

2. 스타일 및 효과

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

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

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

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

3. 보조 요소

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

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

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

<svg width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
    <g transform="translate(20 50)">
        <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)" />
    </g>
    <g transform="translate(40 50)">
        <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)" />
    </g>
    <g transform="translate(60 50)">
        <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)" />
    </g>
    <g transform="translate(80 50)">
        <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)" />
    </g>
</svg>

4. 애니메이션 구현

애니메이션 효과 of

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

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

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

<svg xmlns="http://www.w3.org/2000/svg">
    <rect id="animateObject" x="20" y="20" width="50" height="50" fill="blue"></rect>
    <animateTransform
        xlink:href="#animateObject" <!-- 指定动画元素 -->
        attributeName="transform"  <!-- 需要动画的属性名称 -->
        type="scale"  <!-- 指定transform属性 -->
        begin="0s"    <!-- 开始时间，即延迟 -->
        dur="3s"      <!-- 动画时间 -->
        from="1"      <!-- 开始值 -->
        to="2"        <!-- 结束值 -->
        repeatCount="indefinite"   <!-- 重复方式，indefinite无限重复  -->
    />
</svg>

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

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

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

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

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

🎜🎜#

circle은 원을 그리고, 색상을 채우고, g 태그로 감싸서 배치하고, 변환은 초기 변형을 설정하고, animateTransform은 애니메이션을 설정합니다. 이제 코드를 보면 더 이상 혼란스럽지 않을 것입니다.

<svg class="lds-message" width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
    <g transform="translate(20 50)">
        <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)">
            <animateTransform attributeName="transform" type="scale" begin="-0.375s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
        </circle>
    </g>
    <g transform="translate(40 50)">
        <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)">
            <animateTransform attributeName="transform" type="scale" begin="-0.25s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
        </circle>
    </g>
    <g transform="translate(60 50)">
        <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)">
            <animateTransform attributeName="transform" type="scale" begin="-0.125s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
        </circle>
    </g>
    <g transform="translate(80 50)">
        <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)">
            <animateTransform attributeName="transform" type="scale" begin="0s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
        </circle>
    </g>
</svg>

Rendering:

도 가능합니다. 사용된 js는 svg의 속성을 제어하고, svg의 애니메이션 프로세스를 제어하며, 클릭 및 기타 이벤트에 응답할 수 있는 아이콘 버튼을 생성합니다.

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