SVG（day01）

1. SVG 的 viewBox 属性

<svg version="1.1"
  baseProfile="full"
  width="200" height="200"
  viewBox="0 0 100 100" 从 (0, 0) 点开始页面中显示的图  像放大到原来的 100*100
    xmlns="http://www.w3.org/2000/svg" >

  <rect x="0" y="0" width="100" height="100" />
</svg>

2. SVG 中的 矩形(rect)

  <rect x="40" y="40" rx="10" ry="40" width="100" height="100" />

• x 矩形距离左上角的X位置
• y 矩形距离左上角的Y位置
• rx 圆角的X方向的半径（默认为 0）
• ry 圆角的Y方向的半径（默认为 0）
• width/height 宽高

3. SVG 中的 圆（circle）

  <circle cx="40" cy="40" r="20" />

• cx 位于左上角的 X 位置
• cy 位于左上角的 Y 位置
• r 圆的半径

4. SVG 中的 椭圆（ellipse）

  <ellipse cx="55" cy="60" rx="30" ry="15" />

• cx 位于左上角的 X 位置
• cy 位于左上角的 Y 位置
• rx 半径的 X
• ry 半径的 Y

5. SVG 的线条（line）

  <line x1="10" x2="90" y1="12" y2="150" />

• x1 起点的x位置
• y1 起点的y位置
• x2 终点的x位置
• y2 终点的y位置

6. SVG 中的 折线（ellipse）

  <polyline points="40 48, 40 50, 50 60, 50 70, 60 78, 60 90, 70 95, 75 100, 80 110, 85 120"/>

points 点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。

7. SVG 中的 多边形（ploygon）

  <polygon points="10 10, 10 100, 150 100, 150 10" />

与 ellipse 参数一样，只是绘制完成之后时一个封闭的图形