polyline

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

用法

属性

全局属性

• 条件处理属性
• 核心属性
• 图形事件属性
• 外观属性
• class
• style
• externalResourcesRequired
• transform

专有属性

• 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;
}

规范

浏览器兼容性