polyline

<polyline>

<polyline>SVG元素是创建连接的几个点的直线的SVG基本形状。通常，一个polyline用于创建开放形状，因为最后一点不必连接到第一个点。对于封闭的形状，请参阅<polygon>元素。

用法

类别	基本元素, 图形元素, 形状元素
允许的内容	任意数量、任意排序的下列元素：动画元素，描述性元素

属性

全局属性

条件处理属性

专有属性

points

DOM 接口

该元素实现了SVGPolylineElement接口。

示例

简单使用

SVG

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <polyline fill="none" stroke="black" 
      points="20,100 40,60 70,80 100,20"/>
</svg>

结果

阶梯示例

HTML 内容

 <div class="contain-demo">
   <svg width="150" height="200">
     <desc>
       First orange polyline demonstrating
       white fill on open path.
     </desc>
     <polyline
         points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
         fill="white" stroke="#D07735" stroke-width="6" />
   </svg>
   <svg width="150" height="200">
     <desc>
       Second orange polyline demonstrating
       yellow fill on open path.
     </desc>
     <polyline
         points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
         fill="#F9F38C" stroke="#D07735" stroke-width="6" />
   </svg>
 </div>
<p class="p">
  Demo by Joni Trythall.
  <a href="http://sitepoint.com/understanding-svg-fill-rule-property">See article</a>.
</p>

CSS 内容

.contain-demo {
  margin: 25px auto;
  text-align: center;
}

规范

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2The definition of '<polyline>' in that specification.	Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<polyline>' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	IE	Opera	Safari
Basic support	1.0	(Yes)	1.5 (1.8)	9.0	8.0	3.0.4

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	3.0	(Yes)	1.0 (1.8)	No support	(Yes)	3.0.4