SVG入门

优点

1. 和传统的图像比起来，尺寸更小，且可压缩性更强
2. 可伸缩
3. 图像可在任何的分辨率下被高质量地打印
4. 可在图像质量不下降的情况下被放大
5. 交互性更强

语法

svg之样式属性

• fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值；
• fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）；
• stroke-width 属性定义矩形边框的宽度；
• stroke 属性定义矩形边框的颜色；
• stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
• opacity 属性用于定义了元素的透明值 (范围: 0 到 1)

svg标签

• 所有的SVG代码都是写在<svg>标签中，它是根元素。
• width和height 属性可设置此 SVG 文档的宽度和高度。如果不指定这两个属性，SVG 图像默认大小是300px（宽） x 150px（高）。
• viewBox属性：选取SVG图形的一部分，在当前SVG图形中展示这一部分；它的值有四个数字，分别是左上角的横坐标和纵坐标、SVG片段的宽度（默认为100％）和SVG片段的高度（默认为100％）。

<svg width="400px" height="400px" viewBox="50 50 100 100"> 
  // 这里展示的内容就是从当前SVG左上角(50, 50)点处,长短为100的矩形区域
  <circle cx="100" cy="100" r="50" />
</svg>

circle标签-圆形

• cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
• r属性定义圆的半径

<circle cx="3