前言

在日常开发过程中，我们或多或少都接触过SVG，有可能是用它来画一些简单的图形，有可能是使用它来构建工程的字体文件库，甚至是用它来绘制一些复杂的可视化模块。本文会详细介绍SVG的基本图形以及常见的动画形式，帮助你了解入门SVG。

基本图形

下面会介绍SVG预设的数种形状以及对应的属性介绍，在实际开发或者设计过程中，绘画SVG图标大多数时候都是会使用一些工具的。

矩形

    <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect width="100" height="100" x="20" y="20" rx="30" ry="30" style="fill:rgb(255,255,0);stroke-width:4;
stroke:rgb(0,0,0);fill-opacity: .6;stroke-opacity: .5;" />
    </svg>

在svg标签中，width表示整个宽度，height表示高度，version表示版本，xmlns表示命名空间，后面两个属性是相对固定的东西，稍作理解即可。

rect中的标签属性与style属性解释如下：

• width：宽度
• height：高度
• x：水平方向上的偏移量
• y：竖直方向上的偏移量
• rx、ry：定义圆角效果
• style：样式（这些样式同样适用于下面的图形，所以下面的图形只会介绍属性，不会重复介绍样式）

• fill：rgb颜色，表示矩形的填充颜色
• fill-opacity：填充的不透明度
• stroke：rgb颜色，表示矩形的边框颜色
• stroke-width：矩形边框的大小
• stroke-opacity：矩形边框的不透明度

圆形

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="50" r="40" style="stroke:black; stroke-width:2; fill:blue" />
</svg>

circle标签属性解释如下：

• cx、cy：圆心坐标
• r：圆的半径

椭圆

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="100" cy="50" rx="40" ry="50" style="fill:purple" />
</svg>

ellipse标签属性解释如下：

• cx：圆心的x坐标
• cy：圆心的y坐标
• rx：水平半径
• ry：竖直半径

线条

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="10" x2="100" y2="100" style="stroke:red;stroke-width:2" />
</svg>

line标签属性解释如下：

• x1：线段的起点x坐标
• x2：线段的终点x坐标
• y1：线段的起点y坐标
• y2：线段的终点y坐标

多边形

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon points="10,10 10,200 100,200 100,10" style="fill:red;
    stroke:#000000;stroke-width:1" />
</svg>

polygon标签属性解释如下：

• points：定义多边形的N个(x,y)坐标，不少于三个点

折线

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polyline points="10,10 20,20 30,15 40,40 50,30 60,60" style="fill:transparent;stroke:green;stroke-width:2" />
</svg>

polyline标签属性解释如下：

• points：定义曲线的N个(x,y)坐
• 
  

PS:你看这个曲线图，像不像你最近的股票基金

SVG实例入门与动画实战二https://developer.aliyun.com/article/1495150