直接粘出去看注释吧，懒得再去写markdown文档了。先占一部分持续更新。

摘要还得50个字好麻烦 本人很懒怎么省事怎么来

<!-- 
                    秉承一个原则，从易到难，先看到在接下来。。。 我也是弟弟算是总结
                    基本概念 属性介绍
                    1. fill 对于形状和文本，它是一个表示属性，它定义了用于绘制元素的颜色
                    2. stroke 边框 
                    3. stroke-width 边框宽度
                -->
                <!-- 画圆 -->
                <!-- <circle cx="300" cy="300" r="100" fill="orange" stroke="black" stroke-width="3" />
                <circle cx="300" cy="300" r="50" fill="yellow" stroke="black" stroke-width="3" /> -->
                <!-- 
                    cx cy 其实就是圆的圆心 r 是圆的半径 
                    上面两个圆圆心为止都是 300 300 一个半径100 一个半径50目前就是大圆套小圆
                    如果你把上面标签位置代码行数换一下 小圆就会被大圆覆盖，存在只是像浮动那种被覆盖(严格意义讲我觉得是遮挡)
                -->

                <!-- 矩形 -->
                <!-- 
                    这边矩形属性基本和圆一样 
                    这里简单说下边框的属性 stroke 有意思的一点，不要问为什么现在说，这是我复制上面代码stroke-width属性时改成10看见的
                    第二个正方的 宽高 都是100 还有10个的边框，现在他的长宽绝对大小，算上边框的宽度，个人认为应该是110 怎么算出来的呢 左右两条 一条是10
                    而便边框也算是图形边框的中心先和正方形的变齐边，一边5 整体110 应该是有个属性可以控制那边外边中心线对其的属性
                -->
                <!-- <rect x="120" width="100" height="100" />
                <rect x="120" y="120" width="100" height="100" rx="15" fill="yellow" stroke="black" stroke-width="10" /> -->

                <!-- 线断 -->
                <!-- 
                    stroke-linecap 的三个属性 这边是个人理解
                    1.butt 不封口，线的实际长度就是所给长度
                    2.square 封口，实际长度 = 线的长度加一条边的长度及stroke-width的数值
                    3.round 封口，实际长度 = 线的长度加一条边的长度及stroke-width的数值 
                    区别总结，1是所给两个点的实际长度，2、3全部会加一个边框的长度，2是直角边，3是以线段端点，边框一半长度做圆
                -->
                <!-- <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt" />
                <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square" />
                <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round" /> -->

                <!-- 折线 -->
                <!-- 
                    points 两个数字一个点
                    stroke-linecap 三个值 
                    1.butt  直角
                    2.round 圆角
                    3.square 斜切
                    这里fill的填充区域个人理解简单注意下，形成的区域是点的区域，不带边框的部分
                -->
                <!-- <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="blue"
                    stroke-linejoin="miter" />

                <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round"
                    fill="blue" stroke-linejoin="round" />

                <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square"
                    fill="blue" stroke-linejoin="bevel" /> -->