asp中使用SVG <path>来画任意图形

在做asp开发的过程中，有时候要将asp运行的结果用图形表示出来，这样看起来就更清楚了。我们通常的做法就是使用第三方插件来实现这些图形，但却忘记了html已经为我们准备了画图的工具svg。svg能画矩形、圆形、椭圆、线条、多边形和路径等图形，并且画出的图形还是矢量图，非常方便。
这里介绍一下svg <
path>
来画任意图形，svg画矩形、圆形、椭圆、线条、多边形这些图形的方法大家网上找相关的资料学习一下，都比较简单，这里不作介绍。

<
path>
标签用来定义路径。
path相关参数对应的意思：
M = moveto 定位到某个坐标点，也就是这个图的起点坐标
L = lineto 画线到某个坐标点
H = horizontal lineto 水平画线
V = vertical lineto 
垂直画线
C = curveto 
曲线
S = smooth curveto 光滑的曲线
Q = quadratic Belzier curve 二次曲线belzier
T = smooth quadratic Belzier curveto 光滑的二次Belzier curveto
A = elliptical Arc 椭圆弧
Z = closepath 关闭路径
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位，要根据自己的实际使用选择大小写。
实例一：画三角形
<
!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<
svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<
path d="M250,150 

L150,350 

L350,350 

Z"
/>

<
/svg>

<
/path>


实例二：画曲线
<
svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<
svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<
path d="M250,450 C160,300 500,350 600,500" fill="none" stroke="
#38B866" style="stroke-width: 2px
" />

<
/path>

<
/svg>

<
/path>

<
/svg>


注意：以上不同的参数，需要的坐标数不一样。
有了svg，就不担心画不出来漂亮的图形了