SVG <polyline>
SVG 折线 - <polyline>
使用 <polyline>
元素可以创建任何仅由直线(在多个点连接)组成的形状。
<polyline>
元素有一个基本属性,用于定义折线的点。
属性 | 描述 |
---|---|
points | 必需。折线的点列表。每个点必须包含一个 x 坐标和一个 y 坐标。 |
折线示例
以下示例创建了一个折线。
这是 SVG 代码:
示例
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 50,150 100,75 150,50 200,140 250,140"
style="fill:none;stroke:green;stroke-width:3" />
</svg>
亲自尝试 »
代码解释
points
属性定义了绘制折线所需的点列表(x 和 y 坐标对)。
另一个折线示例
另一个仅使用直线的示例。
这是 SVG 代码:
示例
<svg height="180" width="500" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:yellow;stroke:red;stroke-width:4" />
</svg>
亲自尝试 »