首页 > 上网技巧 > 电脑小技巧 > 正文

SVG基本图形图表之折线效果polyline应用教程

时间:2014-07-21 09:09 作者:QQ地带 我要评论

<polyline> 标籤的用法跟多边形 polygon 的用法基本上是一样的,主要差别在使用 polyline 时,记得把 fill 属性设為 none 才会有线的效果。
 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="10,10 60,60 110,10 160,80, 230,30" style="fill:none;stroke:black;" />
</svg>
折线也是是由多条线组合而成的,所以 points 中指定每一个座标点会依序连成线,而点跟点之间用空格区隔。
 

 
 
当然也能自订样式及组合成不同的图形:
 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="100,10 40,180 190,60 10,60 160,180 100,10" style="fill:none;stroke:black;stroke-width:4;" />
 
<polyline points="200,160 240,160 240,120 280,120 280,80 320,80 320,40 360,40" style="fill:none;stroke:green;stroke-width:4;" />
</svg>
 
笔者将 polyline 的属性整理成一个简单的表格:
 
polyline 属性
属性名称 属性说明
points 每一个座标位置,x1,y1 x2,y2, x3,y3...
transform 折线的变形效果,类似 css 中的 transform

标签: svg
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告