当前位置:asp编程网>技术教程>Asp教程>  正文

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

2018-01-23 10:16:51   来源:网络   作者:佚名   浏览量:689   收藏
在做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,就不担心画不出来漂亮的图形了

关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网