SVG 동적 아이콘이 구현되는 방법

이 글은 SVG 동적 아이콘을 구현하는 방법을 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

Loading.io에서 멋진 로딩 아이콘을 많이 볼 수 있습니다. 그것들은 모두 단 몇 줄의 코드만으로 svg로 작성되었습니다. img 이미지보다 더 세련되고 작으며, 순수 DOM 구현보다 더 유연하고 효율적입니다. 아이콘이 클릭 이벤트에 응답하도록 할 수도 있습니다.

　 원과 사각형을 그리는 방법은 무엇인가요? 색칠하는 방법? 이동하는 방법? 먼저 svg의 기본을 살펴보고, 위의 첫 번째 아이콘을 그려보겠습니다.

1. 기본 그래픽 요소

　SVG에는 직사각형 , 원 , 타원 , 직선 , 다중선 , 다각형

 1 <!-- viewBox定义画布大小 width/height定义实际大小 --> 
 2 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="0 0 300 300"> 
 3  
 4     <!-- 直线 (x1,y1)与(x2,y2)为两点坐标 --> 
 5     <line x1="0" y1="0" x2="250" y2="30" /> 
 6  
 7     <!-- 多边形 通过多个点的坐标形成封闭图形 --> 
 8     <polygon points="5,5 100,100 50,200" /> 
 9 
 10     <!-- 矩形 (x,y)为左上角起始点 -->
 11     <rect x="100" y="100" width="120" height="100" />
 12 
 13     <!-- 圆形 (cx,cy)圆心点 r半径 -->
 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">Try SVG</text>18 19 </svg>

2. 스타일 및 효과

• svg 요소의 스타일은 태그의 속성으로 작성하거나 스타일에 작성할 수 있습니다. 몇 가지 주요 스타일 속성은 다음과 같습니다.

• Stroke : 스트로크 컬러

• 스트로크 폭 : 스트로크 너비

• 스트로크-옵션 : 스트로크 투명도

• 필 : 채우기 색상, 배경

• fill -불투명도: 채우기 색상의 투명도

transform: CSS3 변환과 유사한 그래픽 변환

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

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

3. 보조 요소

• 　SVG에는 3e85b886453624fdb0fdf16e0b451ee0 2199a63ce40299beb55b2a8b469dfcd6 특정 모양을 나타내지는 않지만 그래픽 요소의 그룹 관리, 재사용 등에 도움이 됩니다. 자세한 소개는 여기에서 확인하실 수 있습니다.

• 3e85b886453624fdb0fdf16e0b451ee0 요소는 일반적으로 회전, 크기 조정 또는 관련 스타일 추가와 같은 통합 작업을 위해 관련 그래픽 요소를 그룹화하는 데 사용됩니다.

• 2199a63ce40299beb55b2a8b469dfcd6 기존 SVG 그래픽의 재사용을 실현합니다. 단일 SVG 그래픽 요소를 재사용하거나 3e85b886453624fdb0fdf16e0b451ee09f9d05a576cea0d265e9d798da82bdec로 정의된 그룹 요소를 재사용할 수 있습니다.

• 9f9d05a576cea0d265e9d798da82bdec 내부적으로 정의된 요소는 직접 표시되지 않습니다. 스타일을 미리 정의할 필요는 없지만 2199a63ce40299beb55b2a8b469dfcd6를 사용하여 인스턴스화할 때 정의합니다.

5aaf33f5e4c7c54d016a539db37ebcc8은 3e85b886453624fdb0fdf16e0b451ee0의 그룹화 기능과 9f9d05a576cea0d265e9d798da82bdec의 초기 보이지 않는 기능을 모두 갖춘 자신만의 창을 만들 수 있습니다.

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

 1 <svg width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> 
 2     <g transform="translate(20 50)"> 
 3         <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)" /> 
 4     </g> 
 5     <g transform="translate(40 50)"> 
 6         <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)" /> 
 7     </g> 
 8     <g transform="translate(60 50)"> 
 9         <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)" />
 10     </g>
 11     <g transform="translate(80 50)">
 12         <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)" />
 13     </g>
 14 </svg>

IV. 애니메이션 구현

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

　 95b9bf201d21a40abe523e82bfc3ece7 전환 효과,

　　b32227fb1e5c965892584259ad65af80는 변형 변형 애니메이션 효과를 구현하고,

　　1c3f862fe048da235fb9de11bfd05e0d은 경로 애니메이션 효과를 구현합니다.

　 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로의 전환입니다. 원활한 순환을 형성하려면 최소한 세 가지 핵심 지점을 정의해야 합니다. animateTransform은 점점 더 유연한 속성 설정을 지원합니다.

  🎜🎜🎜values: 여러 키 포인트의 값, value="0;1;0"과 같은 from 및 to 대체 🎜

• keyTimes：跟values对应，各个点的时间点

• calcMode：动画快慢方式。discrete | linear | paced | spline

• keySplines：设置运动的贝塞尔控制点，calcMode为spline时有效

 　　对svg动画的更详细介绍，参考 这里 。

五、代码实例

　　     

　　circle画圆，fill着色，用g标签包裹并定位，transform设置初始形变，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>

 相关推荐：

JS如何操作svg来画图

위 내용은 SVG 동적 아이콘이 구현되는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!