12.20

### 
日期：12.19
    ```xml 线性渐变
    <svg>
        <defs>
            <linearGradient id="line-hor" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="yellow" stop-opacity="1" />
                <stop offset="100%" stop-color="red" stop-opacity="1" />
            </linearGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#line-hor)"></ellipse>
    </svg>
    ```
    
    linearGradient 元素用来定义线性渐变，用于图形元素的填充或描边。
    x1  渐变开始的 x 轴位置。 
    y1  渐变开始的 y 轴位置。
    y2  渐变结束的 y 轴位置。
    
    线性渐变可以定义为水平、垂直或径向渐变：
    
    - 当 y1 和 y2 相等且 x1 和 x2 不同时，将创建水平渐变。
    - 当 x1 和 x2 相等且 y1 和 y2 不同时，将创建垂直渐变。
    - 当 x1 和 x2 不同且 y1 和 y2 不同时，将创建径向渐变。
    
    一个渐变上的颜色坡度，是用 stop 元素定义的。
    
    offset       | 定义渐变开始/停止时的位置。             
    stop-color   | 定义渐变开始/停止时使用的颜色。         
    stop-opacity | 定义渐变开始/停止时指定颜色的不透明度。 
    
    ```xml径向渐变
    <svg>
        <defs>
            <radialGradient id="radial" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                <stop offset="0%" stop-color="white" stop-opacity="0" />
                <stop offset="100%" stop-color="blue" stop-opacity="1" />
            </radialGradient>
        </defs>
        <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#radial)"></ellipse>
    </svg>
    ```
    radialGradient 元素用来定义径向渐变，以对图形元素进行填充或描边。
    
    cx   | 定义一个中心点的 x 轴坐标。                                  
    cy   | 定义一个中心点的 y 轴坐标。                                  
    r    | 定义圆的半径。                                               
    fx   | 定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。 
    fy   | 定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。 
    fr   | 定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。
    
    ```xml动画
    <svg width="500" height="500">
        <circle id="myCircle" cx="100" cy="100" r="50" fill="blue"></circle>
        <animate attributeName="r" from="50" to="100" dur="3s" fill="freeze" xlink:href="#myCircle"></animate>
    </svg>
    ```
    
    animate          | 动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时间点改变。在指定持续时间里，属性从开始值变成结束值。 
    animateTransform | 变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。 
    animateMotion    | 定义了一个元素如何沿着运动路径进行移动。    
    SVG 动画使用方式：
    
    1. 创建动画，告诉动画标记哪个元素需要执行动画。
    2. 创建元素，在元素中说明需要执行什么动画。
    
    attributeName | 标识了在一个动画动作环节中，父元素需要被改变的属性名。                                                              |
    from          | svg 动画发生过程中被修改的属性的初始值。                                                                             |
    to            | svg 动画发生过程中被修改的属性的最终值。                                                                            |
    dur           | 标识了动画的简单持续时间。                                                                                          |
    fill          | 在动画结束后，是否还要保持该动画。             `remove`：在动画的激活持续时间结束后，动画效果会移除。这是默认值。<br />`freeze`：在动画的激活持续时间结束后，动画效果会“冻结”着，直到文档持续时间结束或动画重新开始。 |
    repeatCount   | 动画重复执行次数。                                                                                                 |
    repeatDur     | 动画重复执行总时长。                                                                                                |
    begin         | 规定动画开始的时间。                          `1s`：1s 后开始执行动画。<br/>`click`：click 触发事件执行后再执行动画。<br/>`click + 2s`：click 触发事件执行后，等两秒再执行动画。 |
    restart       | 规定元素开始动画后，是否可以被重新开始执行。    `always`：动画可以在任何时候被重置。这是默认值。<br/>`whenNotActive`：只有在动画没有被激活的时候才能被重置，例如在动画结束之后才能再执行。<br/>`never`：在整个 SVG 执行的过程中，元素动画不能被重置。 |
    calcMode      | 规定每一个动画片段的动画表现。                 `linear`：匀速动画，这是默认值。<br/>`discrete`：非连续动画，没有动画效果瞬间完成。<br/>`paced`：规定整个动画效果始终以相同的速度进行，设置 keyTimes 属性无效。<br/>`spline`：配合 keySplines 属性来定义各个动画过渡效，自定义动画。 |
    keyTimes      | 划分动画时间片段。                             0~1。                                                        |
    values        | 划分对应取值片段的值。     
                                              
    利用 animate 实现一个点击触发无限往返效果。
    ```xml
    <svg width="500" height="500">
        <circle cx="100" cy="100" r="50" fill="blue">
            <animate id="toRight" 
                    attributeName="cx" 
                    from="100" 
                    to="300" 
                    dur="1s" 
                    begin="click;toLeft.end" />
            <animate id="toLeft" 
                    attributeName="cx" 
                    from="300" 
                    to="100" 
                    dur="1s" 
                    begin="toRight.end" />
        </circle>
    </svg>
    ```
    利用 animateTransform 实现一个点击触发水平移动效果。
    ```xml
    <svg width="500" height="500">
        <circle cx="100" cy="100" r="50" fill="blue">
            <animateTransform 
                    attributeName="transform" 
                    type="translate" 
                    from="0 0" 
                    to="200 0" 
                    dur="2s" 
                    begin="click" 
                    fill="freeze" />
        </circle>
    </svg>
    ```
    利用 animateTransform 实现一个点击触发图形旋转效果。
    ```xml
    <svg width="500" height="500">
      <rect x="100" y="100" width="200" height="100" fill="blue">
        <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 100 100"
            to="45 100 100"
            dur="1s"
            begin="click"
            fill="freeze" />
      </rect>
    </svg>
    ```
    利用 animateMotion 实现一个点击触发矩形块沿路径移动的效果。
    ```xml
    <svg width="500" height="500" viewBox="-100 -100 500 500">
        <path 
                d="M0 0 C0 300 300 300 300 0" 
                stroke="red" 
                stroke-width="2" 
                fill="none" />
        <rect x="0" y="0" width="40" height="40" fill="lightgreen">
            <animateMotion 
                    path="M0 0 C0 300 300 300 300 0" 
                    dur="3s" 
                    begin="click" 
                    fill="freeze" 
                    rotate="auto" />
        </rect>
    </svg>
    ```