一般前端开发，绘图这个模块是必须掌握的：
之前遇到一个面试题，如何在页面上面画一个对话框，当时也抓住了主要的点是在对话框中的三角形如何实现
以前没接触SVG时候就直接用border相关属性和transparent的应用（也有涉及相对绝对定位，可自行百度该方法）。
SVG相对来说就更加灵活，不管怎样的图形，在什么位置都是可以通过属性设置来实现的：
下面介绍下基本属性和绘制图形的主要标签：
Svgstroke属性
stroke:定义颜色属性；
Stroke-width:定义了一条线，文本或元素轮廓厚度；
Storke-opacity:定义线条或者元素轮廓等背景的透明度（fill-opacity表示填充颜色透明度）；
【注意】：当fill-opacity、stroke-opacity与opacity属性一起使用时，数值小的生效，结果与位置先后无关
Svg 绘制不同形状的基本图形
<rect>:绘制矩形（x,y分别表示偏移左上位置的大小，rx,ry可以产生圆角类似radius）;
<circle>:绘制圆形（cx,cy表示圆点的位置，r表示圆形半径）;
<ellipse>:绘制椭圆（cx,cy表示圆点的位置，rx,ry分别表示水平半径和垂直半径）;
<line>:绘制直线（x1,y1,x2,y2分别表示始终点的位置）;
<polygon>:绘制多边形，包括三角形（points属性中每个组分别表示多边形各个拐点的坐标）;
<polyline>:绘制折线(和上面的points属性一样)
绘制出的一些效果如下：脑洞大的可自行组合（嘿嘿）
SVG的渐变属性
主要分为线性渐变（linearGradient）和放射渐变（radialGradient）
谨记：上述两个渐变属性标签都是必须嵌套在<defs>的标签内
都需要配合ellipse圆形或椭圆形来配合使用，其中file中的url是指向linearGradient或者radialGradient标签ID的
<ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>
