svg实现loading效果

今天可以购买 9 月 30 号的火车票，十一大家都记得抢票回家呀！不要忘记工作的同时，常回家看看。

我们都知道 SVG 是一种基于 XML 语法的图像格式，其他图像格式都是基于像素处理的。我们绘制 svg 都是由一组 svg 元素组成的，圆使用 circle 标签表示。 

今天我们使用圆绘制一个简单的 loading 效果，如下图所示，添加的动画是不停的旋转。

<svg

  width="50" height="50" 

  viewBox="0 0 50 50">

    <circle class="mycircle" cx="25" cy="25" r="20" />

</svg>

<svg> 的 width 属性和 height 属性，指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。

<viewBox> 属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。表单画布的大小。

上面的代码定义了三个圆。<circle> 标签的 cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于 <svg> 画布的左上角原点。

class 属性用来指定对应的 CSS 类。

<style>

    .mycircle {

        stroke-dasharray: 125.6px;

        animation: move linear 1s infinite;

        transform-origin: center;

        stroke-dashoffset: 30px;

        fill: none;

        stroke: #eee;

        stroke-width: 5px;

    }

    @keyframes move {

        0% {

             transform: rotate(0deg);

        }

        100% {

             transform: rotate(360deg);

        }

    }

</style>

SVG 的 CSS 属性与网页元素有所不同。svg 有一些特殊的属性，只可以在 svg 元素中使用的。

fill：填充色

stroke：描边色

stroke-width：边框宽度

stroke-dashoffset: 描边虚线

stroke-dasharray: 描边偏移

除了使用 CSS 指定动画之外，还可以使用动画标签来处理动画，<animateTransform> 标签用于产生动画效果。用法如下：

<svg

  width="50" height="50"

  viewBox="0 0 50 50">

    <circle

        class="mycircle"

        cx="25"

        cy="25"

        r="20">

        <animateTransform

        attributeName="transform"

        type="rotate"

        from="0"

        to="360"

        dur="1s"

        repeatCount="indefinite" />

    </circle>

</svg>

<animateTransform> 的属性含义如下。

attributeName：发生动画效果的属性名。

from：单次动画的初始值。

to：单次动画的结束值。

dur：单次动画的持续时间。

repeatCount：动画的循环模式。

SVG 代码也可以写在一个独立文件中，然后用 <img>、<object>、<embed>、<iframe> 等标签插入网页。