SVG新年火柴棍动画

旧城等待， 2022-08-24 14:25 263阅读 0赞

正在学习SVG，弄个2014年的火柴棍动画，大家先看[效果][Link 1]。

![SouthEast][]

这个主要是用到了SVG的内置动画，大家可以参考msdn上的[svg动画教程][svg]。

来看看源码，每个字用个g实现，每一笔用一个line。

<?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg viewBox="0 0 60 60" enable-background="new 0 0 52 60" xml:space="preserve">
    
     // 2
    <g>
     <line x1="5" y1="5" x2="25" y2="5" > </line>
     <line x1="25" y1="5" x2="25" y2="25" > </line>
     <line x1="25" y1="25" x2="5" y2="25" > </line>
     <line  x1="5" y1="25" x2="5" y2="45" > </line>
     <line x1="5" y1="45" x2="25" y2="45" > </line>
    </g>
    
     // 0
    <g>
     <line x1="40" y1="5" x2="60" y2="5" > </line>
     <line  x1="60" y1="5" x2="60" y2="25" > </line>
     <line  x1="60" y1="25" x2="60" y2="45" > </line>
     <line x1="60" y1="45" x2="40" y2="45" > </line>
     <line x1="40" y1="45" x2="40" y2="25" > </line>
     <line x1="40" y1="25" x2="40" y2="5" > </line>
    </g>
      
      // 1
    <g>
     <line x1="75" y1="5" x2="75" y2="25" > </line>
     <line  x1="75" y1="25" x2="75" y2="45" > </line>
    </g>
    
      // 4
    <g>
     <line x1="90" y1="5" x2="90" y2="25" > </line>
     <line  x1="90" y1="25" x2="110" y2="25" > </line>
     <line  x1="110" y1="25" x2="110" y2="5" > </line>
     <line  x1="110" y1="25" x2="110" y2="45" > </line>
    </g>
    </svg>

CSS赋予样式

添加动画

整个文件的源码就不列出了，请大家到我的 [codepen][Link 1]在线编辑、下载效果。

\---------------------------------------------------------------  
前端开发whqet，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Link 1]: http://codepen.io/whqet/pen/Kgsox
[SouthEast]: /images/20220824/50c098cdfb674f2e868c57597c4f0d18.png
[svg]: http://msdn.microsoft.com/zh-cn/library/ie/gg193979%28v=vs.85%29.aspx