JS高级--SVG可伸缩矢量图形

SVG(scalable vector graphics)

是使用html来描述二维图形和绘图的语言，特点就在于改变尺寸也不会损失图形质量

图形分为：

• 位图  

  由像素点组成组成 优点：色彩丰富，图片效果好

  缺点：放大缩小失真

• 矢量图

  由数学上一系列算法组成图形，通常用于制作几何图形

  优点：放大缩小不失真，能被很多工具修改比如记事本，尺寸更小

  缺点：色彩少，对于不会书写SVG的人来说，无法修改

  <svg>
      <!-- 线  x1 y1开始坐标 x2 y2结束坐标 stroke轮廓颜色 fill填充颜色-->
      <line x1 ='10' y1='10' x2='100' y2='50' stroke='red' stroke-width='5'></line>
  
      <!-- 矩形 x y起始坐标-->
      <rect  x ='10' y='10' width='50' height='30' stroke='red' fill="rgba(255,0,0,.5)"></rect>
  
      <!-- 圆角矩形 rx='25' 圆角x半径 ry='10'圆角y半径 fill-opacity='.9'填充透明-->
      <rect x='10' y='10' rx='25' ry='10' width='50' height='30' stroke='red' fill="rgba(255,0,0,.1)" ></rect>
  
      <!-- 圆型 cx圆心x坐标-->
      <circle cx='100' cy='50' r='20' stroke='red' stroke-width='5' fill="rgba(255,0,0,.5)" ></circle>
  
      <!-- 创建椭圆 ellipse -->
      <ellipse cx ='50' cy='50' rx='20' ry='40' stroke='blue' fill="rgba(255,0,0,.5)"></ellipse>
  
      <!-- 多边形 polygon -->
      <polygon points='10,10 30,20 50,5 ' stroke='blue' fill="rgba(255,0,0,.5)"></polygon>

      </svg>
  

  　

• line

• 　

• rect

• 

• 圆角矩形
• 

   

• circle

•  

• 

• ellipse

• 

• polygon

•