使用CSS实现动态的SVG效果

动态的SVG效果很炫酷，那该如何实现这一效果呢？这里尝试一种简单的方法，结合CSS的动画效果和SVG元素，实现简单的动态SVG。

示例一：多个黄色小球的运动

示例二：一个简单的动态SVG示例

在这里，我们让一个黄色的小球从左到右慢慢滑动，一直在重复这一过程。

接下来的部分，逐步说明是如何实现这个动作的。

CSS动画效果的知识点

@keyframes 和 animation 这两个css类在实现动画效果时经常被用到。

@keyframes

@keyframes可以用来自定义类。这里，使用@keyframes自定义类popup，实现效果为：在0%的时间点下元素不移动，在50%的时间点下元素移动到200px处，在100%的时间点下元素移动到400px处。

@keyframes popup {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(200px);
    }
    100% {
        transform: translateX(400px);
    }
}

animation

animation 为一系列animation-*的缩写形式，完整的类名如下：

• animation-name 用来定义动画名，结合上面说到的@keyframes一起使用
• animation-duration 表示动画持续的时间长短
• animation-timing-function 指定动画的速度曲线
• animation-delay 表示动画延迟多长时间开始
• animation-iteration-count 表示动画重复的次数
• animation-direction 指定动画是向前播放、向后播放还是交替播放

关于示例部分的两种方式如下

.move {  
  animation-name: popup;  
  animation-duration: 3s;  
  animation-timing-function: ease-in;  
  animation-delay: 0s;  
  animation-iteration-count: infinite;  
  animation-direction: alternate;  
}

.move {
    animation: popup 3s 0s ease-in infinite alternate;
}

SVG 元素的绘制

如何生成SVG元素呢？

方法之一是手搓SVG元素，按照SVG元素的规则自己完成。这种方式实现简单的元素还可以，对于复杂元素则不适用。

这里生成SVG元素的方式是借助draw.io软件，可以绘制好想要的图形，然后导出为SVG格式即可。如果需要格式化，可以使用在线的xml格式化工具，使得SVG的源文件具有更好的可读性，方便添加css代码。

在以下的SVG元素中，给<ellipse>增加了class="move"的自定义类，使得之前定义的move动画效果可以应用在当前的SVG元素上，代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400px" height="60px">
    <defs />
    <rect fill="#FFFFFF" width="100%" height="100%" x="0" y="0" />
    <ellipse id="move" class="move"  cx="30" cy="30" rx="20" ry="20" fill="#F5CB3A" stroke="#F5CB3A" pointer-events="all"/>
</svg>    

这样一个会动的黄色小球就可以正常工作了。

附示例二SVG代码

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400px" height="60px">
    <defs />
    <rect fill="#FFFFFF" width="100%" height="100%" x="0" y="0" />
    <ellipse id="move" class="move"  cx="30" cy="30" rx="20" ry="20" fill="#F5CB3A" stroke="#F5CB3A" pointer-events="all"/>
    <style>
    .move {
        animation: popup 3s 0s ease-in infinite;
    }

    @keyframes popup {
        0% {
            transform: translateX(0px);
        }
        50% {
            transform: translateX(200px);
        }
        100% {
            transform: translateX(400px);
        }
    }
  </style>
</svg>