polyline
<polyline>SVG元素是创建连接的几个点的直线的SVG基本形状。通常，一个polyline用于创建开放形状，因为最后一点不必连接到第一个点。对于封闭的形状，请参阅<polygon>元素。
用法
类别 | 基本元素, 图形元素, 形状元素 |
|---|---|
允许的内容 | 任意数量、任意排序的下列元素： 动画元素，描述性元素 |
属性
全局属性
- 条件处理属性
- 核心属性
- 图形事件属性
- 外观属性
classstyleexternalResourcesRequiredtransform
专有属性
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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
