可缩放矢量图形（SVG）简介：动画-荻酷网

在上一篇文章中，我逐步创建了一个基本的 SVG。在本文中，我将继续我们上次停下的部分并探索 SVG 动画。

位图/光栅图形由单独的像素组成，而矢量图形则由单独的形状组成。

这使得矢量图形能够在不损失质量的情况下进行缩放，因为它们可以在任何分辨率下清晰地渲染。

然而，SVG 由单独的形状组成还有另一个好处。每种形状都可以按照我们的意愿设计。

由于 SVG 中的每个形状都可以设置样式，因此我们能够在 Web 上创建动画图形。

动画 SVG：一个基本示例

可缩放矢量图形 svg 动画

我将修改我们在上一篇文章中创建的 SVG。

目前，我们有以下标记来创建 SVG：

<svg  
  viewBox="0 0 400 400"  
  xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)"  
/>  
  <circle cx="50%" cy="50%" r=25% />  
  <circle cx="50%" cy="50%" r=10% />  
</svg>

circle我们在 CSS 中设置元素的样式：

svg {  
  height: 400px;  
  width: 400px;  
}
circle {  
  &:first-child {  
    fill: #FDC56B;  
    stroke: #3E829B;  
    stroke-width: 20;  
  }  
    
  &:last-child {  
    fill: #D45F5B;  
  }  
}

让我们尝试使用CSS 动画为这些圆圈添加动画效果。

首先，我们可以定义我们的keyframes动画：

[@keyframes](http://twitter.com/keyframes) fade-in {  
  from {  
    fill-opacity: 0;  
  } to {  
    fill-opacity: 1;  
  }  
}

每当指定此动画时，fill都会从的不透明度0 变为的不透明度1（我们可以省略to ，因为fill-opacity: 1这是隐式默认值）。

让我们将此动画分配给外圆：

circle {  
  &:first-child {  
    fill: #FDC56B;  
    stroke: #3E829B;  
    stroke-width: 20;  
    animation: fade-in 2s ease-out infinite;  
  }  
    
  &:last-child {  
    fill: #D45F5B;  
  }  
    
  [@keyframes](http://twitter.com/keyframes) fade-in {  
    from {  
      fill-opacity: 0;  
    }  
      
    to {  
      fill-opacity: 1;  
    }  
  }  
}

可缩放矢量图形 svg 动画

我们已经制作了动画fill，但我们还可以为任何SVG 属性制作动画。

stroke-width让我们尝试一下动画：

[@keyframes](http://twitter.com/keyframes) fade-in {  
  from {  
    fill-opacity: 0;  
    stroke-width: 0;  
  }  
   
  to {  
    fill-opacity: 1;  
    stroke-width: 20;  
  }  
}

可缩放矢量图形 svg 动画

最后，我们可以将此动画应用到最内圈，时间略有不同：

circle {  
  &:first-child {  
    fill: #FDC56B;  
    stroke: #3E829B;  
    stroke-width: 20;  
    animation: fade-in 2s ease-out infinite;  
  }  
    
  &:last-child {  
    fill: #D45F5B;  
    animation: fade-in 2s ease-in infinite;  
  }  
    
  [@keyframes](http://twitter.com/keyframes) fade-in {  
    from {  
      fill-opacity: 0;  
      stroke-width: 0;  
    }  
      
    to {  
      fill-opacity: 1;  
      stroke-width: 20;  
    }  
  }  
}