TreeviewCopyright © aleen42 all right reserved, powered by aleen42

Introduction Back

  • Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
  • It's not supported by IE kernel.
  • There is no semicolon (;) behind each statement.

Animation

Step 1
  • build the outline of one object with Adobe Illustrator CC.
  • remember to save your SVG file with the following optimal configuration.

<g>
    <!--M: start point; Z: end point -->
    <!--path label to represent the outline of an object-->
    <path style="fill:#60B17C;" d="M0.285-137.776c40.215,0.925,73.65,14.713,100.311,41.369
            c26.655,26.661,40.444,60.096,41.369,100.311c-0.553,31.731-9.685,59.588-27.395,83.568s-40.864,40.955-69.457,50.917
            c-3.506,0.552-5.997,0.043-7.471-1.522c-1.479-1.57-2.214-3.368-2.214-5.397l0.277-39.017c0-6.641-0.968-12.129-2.906-16.465
            c-1.937-4.332-4.198-7.61-6.779-9.822c16.417-1.108,31.131-6.408,44.137-15.911c13.006-9.5,19.877-27.534,20.615-54.099
            c0-7.562-1.293-14.527-3.874-20.891c-2.586-6.365-6.183-12.038-10.792-17.019c1.107-1.841,2.028-6.087,2.768-12.729
            c0.735-6.641-0.648-14.943-4.151-24.904c0-0.554-3.139-0.416-9.408,0.414c-6.274,0.83-16.145,5.583-29.609,14.251
            c-11.441-3.135-23.201-4.705-35.282-4.705c-12.084,0-23.936,1.57-35.558,4.705c-13.469-8.668-23.34-13.421-29.609-14.251
            c-6.274-0.83-9.408-0.968-9.408-0.414c-3.506,9.961-4.891,18.262-4.151,24.904c0.735,6.641,1.66,10.888,2.767,12.729
            c-4.613,4.8-8.21,10.378-10.791,16.742c-2.586,6.365-3.875,13.421-3.875,21.169c0.736,26.385,7.563,44.371,20.477,53.961
            c12.911,9.594,27.577,14.942,43.998,16.05c-2.033,1.66-3.874,4.059-5.534,7.194c-1.66,3.14-2.863,7.013-3.598,11.622
            c-4.799,2.586-11.254,3.692-19.37,3.321c-8.12-0.367-15.405-5.44-21.861-15.219c-2.953-4.981-6.322-8.578-10.1-10.792
            c-3.783-2.214-7.705-3.502-11.761-3.875c-3.506-0.367-5.672,0.187-6.503,1.66c-0.83,1.479,0.968,3.694,5.395,6.641
            c4.428,2.954,7.791,6.227,10.1,9.824c2.305,3.597,4.195,7.333,5.673,11.207c2.214,5.903,7.195,10.835,14.943,14.805
            c7.748,3.965,18.721,4.565,32.929,1.798l0.277,26.288c0,2.029-0.74,3.827-2.214,5.397c-1.479,1.565-3.969,2.075-7.472,1.522
            c-28.597-9.962-51.746-26.937-69.456-50.917s-26.842-51.838-27.395-83.568c0.921-40.215,14.709-73.651,41.369-100.311
            c26.656-26.656,60.092-40.444,100.311-41.369L0.285-137.776z"/>
</g>
Step 2
  • add <defs> (放射性渐变標籤) for what you want to design, and then give it an id
<defs>
<g id="github">
    <path style="fill:#60B17C;" d="M0.285-137.776c40.215,0.925,73.65,14.713,100.311,41.369
            c26.655,26.661,40.444,60.096,41.369,100.311c-0.553,31.731-9.685,59.588-27.395,83.568s-40.864,40.955-69.457,50.917
            c-3.506,0.552-5.997,0.043-7.471-1.522c-1.479-1.57-2.214-3.368-2.214-5.397l0.277-39.017c0-6.641-0.968-12.129-2.906-16.465
            c-1.937-4.332-4.198-7.61-6.779-9.822c16.417-1.108,31.131-6.408,44.137-15.911c13.006-9.5,19.877-27.534,20.615-54.099
            c0-7.562-1.293-14.527-3.874-20.891c-2.586-6.365-6.183-12.038-10.792-17.019c1.107-1.841,2.028-6.087,2.768-12.729
            c0.735-6.641-0.648-14.943-4.151-24.904c0-0.554-3.139-0.416-9.408,0.414c-6.274,0.83-16.145,5.583-29.609,14.251
            c-11.441-3.135-23.201-4.705-35.282-4.705c-12.084,0-23.936,1.57-35.558,4.705c-13.469-8.668-23.34-13.421-29.609-14.251
            c-6.274-0.83-9.408-0.968-9.408-0.414c-3.506,9.961-4.891,18.262-4.151,24.904c0.735,6.641,1.66,10.888,2.767,12.729
            c-4.613,4.8-8.21,10.378-10.791,16.742c-2.586,6.365-3.875,13.421-3.875,21.169c0.736,26.385,7.563,44.371,20.477,53.961
            c12.911,9.594,27.577,14.942,43.998,16.05c-2.033,1.66-3.874,4.059-5.534,7.194c-1.66,3.14-2.863,7.013-3.598,11.622
            c-4.799,2.586-11.254,3.692-19.37,3.321c-8.12-0.367-15.405-5.44-21.861-15.219c-2.953-4.981-6.322-8.578-10.1-10.792
            c-3.783-2.214-7.705-3.502-11.761-3.875c-3.506-0.367-5.672,0.187-6.503,1.66c-0.83,1.479,0.968,3.694,5.395,6.641
            c4.428,2.954,7.791,6.227,10.1,9.824c2.305,3.597,4.195,7.333,5.673,11.207c2.214,5.903,7.195,10.835,14.943,14.805
            c7.748,3.965,18.721,4.565,32.929,1.798l0.277,26.288c0,2.029-0.74,3.827-2.214,5.397c-1.479,1.565-3.969,2.075-7.472,1.522
            c-28.597-9.962-51.746-26.937-69.456-50.917s-26.842-51.838-27.395-83.568c0.921-40.215,14.709-73.651,41.369-100.311
            c26.656-26.656,60.092-40.444,100.311-41.369L0.285-137.776z"/>

</g>
</defs>
Step 3
  • use <use> to add <animateTransform > or <animate>.

    • Scale with opacity

      Code

      <use x="0" y="0" opcity="0" xlink:href="#github">
        <animateTransform
            attributeName="transform"
            attributeType="XML" <!--this can be CSS/XML/auto, x, y and transform belong to XML-->
            type="scale"
            dur="1s"
            values="1; 1.06; 1"
            keyTimes="0; 0.138; 1" <!--time: 0.138 * 1, to be 1.06.-->
            additive="sum" <!--This attribute controls whether or not the animation is additive.-->
            repeatCount="Indefinite" <!--forever-->
            />
        <animate
            attributeName="opacity"
            dur="1s"
            values="0; 0.6; 0"
            keyTimes="0; 0.138; 1"
            repeatCount="Indefinite"
            />
      </use>
      

      Show

      See the Pen kXmvRL by aleen42 (@aleen42) on CodePen.

    • x/y with opacity

      Code

      <use x="0" y="0" opcity="0" xlink:href="#github">
        <animate
            attributeName="x"
            dur="2s"
            values="0; 100; 200; 100; 0; -100; -200; -100; 0"
            keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
            repeatCount="indefinite"
            />
        <animate
            attributeName="y"
            dur="2s"
            values="0; 100; 200; 100; 0; -100; -200; -100; 0"
            keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"
            repeatCount="indefinite"
            />
        <animate
            attributeName="opacity"
            dur="2s"
            values="0; 1; 0"
            keyTimes="0; 0.5; 1"
            repeatCount="indefinite"
            />
      </use>
      

      Show

      See the Pen oLOpPd by aleen42 (@aleen42) on CodePen.

    • path(with auto rotate)

      Code

      <use x="0" y="0" opcity="0" xlink:href="#github">
        <animateMotion
            attributeName="x"
            dur="2s"
            keyTimes="0; 0.138; 1"
            path="M10,80 q100,120 120,20 q140,-50 160,0"
            repeatCount="indefinite"
            />
        <animate
            attributeName="opacity"
            dur="2s"
            values="0; 1; 0"
            keyTimes="0; 0.138; 1"
            repeatCount="indefinite"
            />
      </use>
      

      Show

      See the Pen rLbpqr by aleen42 (@aleen42) on CodePen.

    • path(without auto rotate)

      Code

      <use x="0" y="0" opcity="0" xlink:href="#github">
        <animateMotion
            attributeName="x"
            dur="2s"
            keyTimes="0; 0.138; 1"
            path="M10,80 q100,120 120,20 q140,-50 160,0"
            repeatCount="indefinite"
            rotate="auto"
            />
        <animate
            attributeName="opacity"
            dur="2s"
            values="0; 1; 0"
            keyTimes="0; 0.138; 1"
            repeatCount="indefinite"
            />
      </use>
      

      Show

      See the Pen qNwpJx by aleen42 (@aleen42) on CodePen.

Step 4
  • what we can also do is to add event for SVG with JavaScript.

    • JavaScript

      var animate = document.getElementsByTagName("animate")[0];
      if (animate) {
      document.getElementById("svg").onclick = function() {
        animate.beginElement();
      };
      }
      
    • SVG

      <svg id="svg">
        <!--relization-->
      </svg>
      

Appendix

  • Bezier Curve(貝塞爾曲線)

calcMode="spline" calcMode="linear"

keySplines="0 0 1 1" keySplines="0.5 0 .5 1" keySplines="0 .75 .25 1" keySplines="1 0 .25 .25"

  • accumulate & additive

    • accumulate是累積的意思. 支持參數有:none | sum. 默認值是none. 如果值是sum表示動畫結束時候的位置作為下次動畫的起始位置.
    • additive控制動畫是否附加. 支持參數有:replace | sum. 默認值是replace. 如果值是sum表示動畫的基礎屬性會附加到其低優先級的動畫上
  • stroke

    • stroke 表示描邊顏色
    • stroke-width 表示描邊粗細
    • stroke-linecap 表示描邊端點的表示方法
      • butt
      • round
      • square
      • inherit
    • stroke-linejoin 表示描邊轉角的表示方式
      • miter
      • round
      • bevel
    • stroke-dasharray 表示虛線描邊
    • stroke-dashoffset 表示虛線的起始位置
    • stroke-opacity 表示描邊透明度
  • restart

支持的參數有:always | whenNotActive | never, 默認值是always, 用於動畫開始後點擊事件對動畫的影響

Empty Comments
Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.