[SVG学习之路]学会画形状

据上次更新，已经有一段时间了，太忙了，公司有新的项目给我，就没学SVG。这几天回家可以学和更新了。
废话不多说。
IDE工具：  vscode 
动态图软件： gifcam   
vscode插件： SVG Viewer （1.4.3版本）  PS：这款插件可以直接在vscode上直接看到svg的效果。

补充
动态图上的文字是在 网站：https://www.liaotiantu.com/imgtool/wordtopic#xztp 上加的  gifcam自带的不会使。

插件安装步骤:快捷键CTRL+SHIFT+X（360浏览器是截图，需关闭）或点击   输入SVG Viewer --->安装---->重载
然后就可以使用右键点击svg文件查看效果图了。

首先：新建一个文件  后缀名svg的文件，画一个黑色外边，像素2 的半径40的红圆.

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="70" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

从svg标签开始  width和height是设置svg文档的宽高。 circle标签是画圆。他的属性cx是指圆的圆形到左上角（0，y）的距离。cy指圆的圆形到左上角（x，0）的距离        r是半径的意思。stroke是轮廓的颜色

stroke-width是轮廓的宽  fill是圆的颜色。

形状的标签有：

• 矩形 <rect>
• 圆形 <circle>
• 椭圆 <ellipse>
• 线 <line>
• 折线 <polyline>
• 多边形 <polygon>
• 路径 <path>

具体实例可以到w3school查看：

http://www.w3school.com.cn/svg/

待续