SVG Polyline(折线)




<polyline>元素是用来画折线的。

语法

下面是<polyline>的语法声明,这里只介绍主要的属性

<polyline
points="一系列点" >
</polyline>

属性

S.N. 名称和描述
1 points - 绘制折线的一系列点.

实例

testSVG.html
<html>
<title>SVG折线</title>
<body>
<h1>SVG折线实例</h1>
<svg width="300" height="630">
   <g>
      <text x="0" y="15" fill="black" >折线 #1: 不透明.</text>
      <polyline points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
      stroke="black" stroke-width="3" fill="none">
   </g>
   <g>
      <text x="0" y="360" fill="black" >折线 #2: 透明 </text>
      <polyline points="150,375 258,437.5 258,562.5 150,625 42,562.6 42,437.5"
      style="fill:none;stroke-width:3;stroke:rgb(0,0,0);stroke-opacity:0.5;">
   </g>
</svg>
</body>
</html>

输出

在Chrome浏览器上打开文件,你能用Chrome/Firefox/Opera或IE9+直接看到SVG图像而不用任何插件,在IE8里需要使用activeX控件才能看SVG图像。

SVG折线实例

SVG折线实例

实例中,使用了style(样式),这里说下几个样式的含义。fill - 填充颜色,none表示不填充颜色,stroke-width - 图边的宽度 ,  stroke - 图边的颜色 ,  stroke-opacity - 图边透明度 ,  opacity - 图形透明度 。