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

---

前言

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

---

一、SVG是什么？

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

SVG 使用 XML 格式定义图像。

二、使用步骤

1.画图形

①画线

代码如下（示例）：

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

②圆

<svg width="500" height="500">
<circle cx="300" cy="300" r="100" fill="red" fill-opacity="0.3"></circle>
<circle cx="300" cy="300" r="100" fill="red" stroke="green" stroke-width="10" fill-opacity="0.3"></circle>
</svg>

③折线

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

④多边形

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

2.动画效果

平移

代码如下（示例）：

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

---

摇摆

代码如下（示例）：

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

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

总结

努力学习