SVG 동적 아이콘이 구현되는 방법-HTML 튜토리얼-php.cn

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

不言

풀어 주다： 2018-07-18 17:59:08

원래의

8410명이 탐색했습니다.

이 글은 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>

로그인 후 복사

svg 요소의 스타일은 태그의 속성으로 작성하거나 스타일에 작성할 수 있습니다. 몇 가지 주요 스타일 속성은 다음과 같습니다.
Stroke : 스트로크 컬러
스트로크 폭 : 스트로크 너비
스트로크-옵션 : 스트로크 투명도
필 : 채우기 색상, 배경
fill -불투명도: 채우기 색상의 투명도

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

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

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

　SVG에는 특정 모양을 나타내지는 않지만 그래픽 요소의 그룹 관리, 재사용 등에 도움이 됩니다. 자세한 소개는 여기에서 확인하실 수 있습니다.
요소는 일반적으로 회전, 크기 조정 또는 관련 스타일 추가와 같은 통합 작업을 위해 관련 그래픽 요소를 그룹화하는 데 사용됩니다.
기존 SVG 그래픽의 재사용을 실현합니다. 단일 SVG 그래픽 요소를 재사용하거나 로 정의된 그룹 요소를 재사용할 수 있습니다.
내부적으로 정의된 요소는 직접 표시되지 않습니다. 스타일을 미리 정의할 필요는 없지만 를 사용하여 인스턴스화할 때 정의합니다.

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

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

 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의 애니메이션 효과는 애니메이션 태그 요소를 기반으로 합니다.

　 전환 효과,

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

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

　 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>

로그인 후 복사