3.6 SVG基础

概念

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

圆

   // 起点，半径 
.fancy {
  fill: none;  // 填充
  stroke: black; //  描边色
  stroke-width: 3pt; // 边的宽
}

线

// 直线：起点，终点，样式

// 折线：三个点，可以很多个point

矩形

椭圆

多边形

路径

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

文本

  Hello World

其他

• use 复制
• g 组
• image
• animate