SVG笔记

SVG的基本结构

<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg"></svg>

viewBox=”x, y, w, h”

x、y 控制SVG内所有元素的相对位置。w，h用来控制svg宽高，这里的宽高并不是svg元素的dom尺寸，而是svg的内分辨率，受svg的width，height和preserveAspectRatio等属性值影响

preserveAspectRatio=”xMinYMin meet”

preserveAspectRatio属性用来设置viewBox的缩放和对齐方式，xMinYMin meet的意思是，根据视口的宽高进行等比例缩放，这里的视口就是指width和height值组成的矩形区域。

闪动文字

<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
  <g>
     <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
     <text x="340" y="1750" fill="#fff" style="font-size:36px">>点一下屏幕，有请主角<</text>
  </g>
 </svg>

<g>标签即group的缩写

用来对元素进行组合， 这样animate效果就限制在组内

attributeName

指定变换的属性名，这里是透明度opacity

begin

指定动画开始的时间，可以是一组用分号分隔的值

dur

指定动画的时长，值越小动画越快，反之亦然

values

指定attributeName属性的变化值，可以是单值也可以是分号分隔的列表。这里的1;0;1指定是透明度在0->1->0之间变换，产生闪烁的效果

repeatCount

表示循环次数。不但可以是数字，也可以是"indefinite"，表示可以无限循环下去。

加入首屏、动画图片、事件触发

<svg style="transform:rotateZ(0deg);background-color:#000;background-size:100% auto;background-repeat:no-repeat;width:100%;height:620px;" version="1.1" viewBox="0 0 1080 620" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
  <animate attributeName="height" begin="click+3.5s" restart="never" dur="0.01s" from="620" to="0" fill="freeze"></animate>
  <animate attributeName="opacity" begin="click+3.5s" restart="never" dur="0.02s" from="1" to="0" fill="freeze"></animate>
  <g>
    <animateTransform attributeName="transform" type="translate" fill="freeze" calcMode="discrete" restart="never" keyTimes="0;0.000001;1" values="0 0;-1080 0;-1080 0" dur="1200s" begin="click"></animateTransform>
    <g>
      <foreignObject x="0" y="0" width="1080" height="1950">
        <svg style="background-image:url("图片链接");background-size:100% auto;background-repeat:no-repeat;width:100%;height:100%;"></svg>
      </foreignObject>
      <foreignObject x="0" y="0" width="1080" height="1950" transform="translate(1080, 0)">
        <svg xmlns="http://www.w3.org/2000/svg" style="background-image:url("图片链接");background-size:100% auto;background-repeat:no-repeat;width:100%;height:100%;">
        </svg>
      </foreignObject>
      <g>
        <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
        <text x="340" y="1750" fill="#fff" style="font-size:36px">>点一下屏幕，有请主角<</text>
      </g>
    </g>
  </g>
</svg>

foreignObject

可以理解成一个svg容器，支持x, y, width, height, transform位移等属性，这里我们将包含gif动画图片的foreignObject位移属性设置为 transform=”translate(1080, 0)，使gif动画沿x轴向右移动自身宽度距离，使动画开始隐藏起来，等待事件触发显示

<g>标签嵌套

我们将元素放在不同的分组里，方便后面添加事件

animateTransform

用来对元素进行位移，旋转，斜切等操作

transform

可以是 translate、scale、rotate、skewX、skewY

fill

指定动画间隙的填充方式。支持参数有：freeze、remove。remove是默认值，表示动画结束直接回到开始的地方。freeze表示动画维持结束后的状态

restart

支持的参数有always、whenNotActive、never。always是默认值，表示每点一次重新执行动画；whenNotActive表示动画正在进行的时候不能重启动画；never表示动画仅执行一次

begin=“click”

这里click，表示点击后立即触发， begin="click+3.5s"表示点击后3.5秒触发。

构建第二屏动画

svg高度设置0，SVG有了定位叠加效果，类似设置position:absolute定位效果

<div style="height:0px">
  <svg></svg>
</div>
<div style="height:0px">
  <svg></svg>
</div>

第二屏动画是一张静态图片，用来显示gif动画最后一帧的产品图，没有什么新知识点，如有疑问可以参考本文的源码。

最后介绍一下两屏动画的组织方式，我将每屏动画放在一个单独的div标签中，并设置div标签的高度为0，由于svg元素的高度不受父容器高度影响，结果会产生类似层叠定位效果，就像设置父容器定位position:absolute一样。

这样我们就可以将多组动画放在各自的div中，当使用animate动画隐藏了该组svg元素后，下面一层的svg就会展示出来等待交互。