3.6 SVG基础

概念

SVG 图像是100像素宽 x 100像素高，viewBox属性指定视口从(50, 50)这个点开始
视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。

<svg width="100" height="100" viewBox="50 50 50 50"></svg>

圆

 <circle cx="30"  cy="50" r="25" class="fancy" />  // 起点，半径 
.fancy {
  fill: none;  // 填充
  stroke: black; //  描边色
  stroke-width: 3pt; // 边的宽
}

线

// 直线：起点，终点，样式
<line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" />
// 折线：三个点，可以很多个point
<polyline points="3,3 30,28 3,53" fill="none" stroke="black" />

矩形

  <rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />

椭圆

  <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>

多边形

 <polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/>

路径

M：移动到（moveto）
L：画直线到（lineto）
Z：闭合路径

<path d="
    M 18,3 
     L 46,3
      Z
"></path>

文本

  <text x="50" y="25">Hello World</text>

其他

• use 复制
• g 组
• image
• animate