SVG动画效果

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

随着人工智能的不断发展，web这门技术也越来越重要，很多人都开启了学习web学习，本文就介绍了web SVG学习的基础内容。

---

一、SVG是什么？

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。

SVG 使用 XML 格式定义图像。

二、使用步骤

1.画图形

①画线

代码如下（示例）：

1.  
   <svg width="500" height="500">
2.  
   <line x1="0" y1="0" x2="100" y2="100" stroke="red"></line>
3.  
   </svg>

②圆

1.  
   <svg width="500" height="500">
2.  
   <circle cx="300" cy="300" r="100" fill="red" fill-opacity="0.3"></circle>
3.  
   <circle cx="300" cy="300" r="100" fill="red" stroke="green" stroke-width="10" fill-opacity="0.3"></circle>
4.  
   </svg>
5.  
    

③折线

1.  
   <svg width="500" height="500">
2.  
   <polyline points="0,0,0,100,50,100" stroke="green" fill="none"></polyline>
3.  
   </svg>

④多边形

1.  
   <svg width="500" height="500">
2.  
   <polygon points="200 0 200 100 300 100 500 0" stroke="green" fill="none"></polygon>
3.  
   </svg>

2.动画效果

平移

代码如下（示例）：

1.  
   <svg width="800" height="800">
2.  
   <circle cx="100" cy="100" r="5">
3.  
   <animate repeatCount="indefinite" attributeName="r" attributeType="XML" from="0" to="100" dur="1" fill="freeze"></animate>
4.  
   <animate repeatCount="indefinite" attributeName="fill" attributeType="XML" from="black" to="blue" dur="1" fill="freeze"></animate>
5.  
   <animate repeatCount="indefinite" attributeName="cx" attributeType="XML" from="100" to="600" dur="1" fill="freeze"></animate>
6.  
   <animate repeatCount="indefinite" attributeName="cx" attributeType="XML" begin="1" from="600" to="100" dur="1" fill="freeze"></animate>
7.  
   </circle>
8.  
   </svg>

---

摇摆

代码如下（示例）：

1.  
   <svg width="1000" height="800">
2.  
   <rect width="500" height="500" fill="red">
3.  
   <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" from="0 500 500 " to="360 300 300" dur="1"></animateTransform>
4.  
   </rect>
5.  
   </svg>

animateTransform 可能会标红，但不要担心。可以出效果的

总结

努力学习 

这篇好文章是转载于：学新通技术网