参考文献：
https://www.runoob.com/svg/svg-tutorial.html 1：绘制简单图形 ①矩形 学习原生SVG ②圆形 学习原生SVG相关属性： ①cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0) ②r属性定义圆的半径
③直线 学习原生SVG相关属性： ①x1 属性在 x 轴定义线条的开始 ②y1 属性在 y 轴定义线条的开始 ③x2 属性在 x 轴定义线条的结束 ④y2 属性在 y 轴定义线条的结束
④多边形 学习原生SVG相关属性： ①points 属性定义多边形每个角的 x 和 y 坐标
⑤多线段 学习原生SVG ⑥路径 学习原生SVG相关属性： path元素用于定义一个路径，下面的命令可用于路径数据： ① M = moveto ② L = lineto ③ H = horizontal lineto ④ V = vertical lineto ⑤ C = curveto ⑥ S = smooth curveto ⑦ Q = quadratic Bézier curve ⑧ T = smooth quadratic Bézier curveto ⑨ A = elliptical Arc ⑩ Z = closepath 注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
⑦文本 学习原生SVG 小辰哥哥 2：关于图形变换 ①平移 学习原生SVG相关属性： ① transform=“translate(x-value, y-value)”
②缩放 学习原生SVG相关属性： ①transform=“scale(value)” 所有的 x 和 y 坐标乘以给定的 value ②transform=“scale(x-value, y-value)” 所有 x 坐标乘以给定的 x-value，所有 y 坐标乘以给定的 y-value
③旋转 学习原生SVG相关属性： ①在默认的坐标系统中，角度的测量是按顺时针增加的，水平线的角度为 0 度 ②组合变换中，一定要先平移，后旋转（推荐）
3：defs元素作用： ①通过在起始和结束defs标记之间放置一些组合对象，我们可以告诉 SVG 只定义但不显示它们。 ②实际上，SVG 规范推荐我们将所有想要复用的对象放置在defs元素内，这样 SVG 阅读器进入流式环境中就能更高效地处理数据。
①使用DOM直接操作 学习原生SVG ②使用JS代码间接操作 学习原生SVG$(document).ready(function() {$("#button").click(function(){// (1) 首先