语言►SVG

SVG中的polyline元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/17/SVG%E4%B8%AD%E7%9A%84polyline%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

  1. 作用
  2. attribute

正文

作用

绘制折线线段

<polyline>绘制的是开放图形，其终点不会和起点相连。注意不要和<polygon>绘制的封闭图形相混淆

示例：

1
2
3
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <polyline points="0 0 50 25 75 150" style="stroke:#000"/>
</svg>

示例：去除填充

1
2
3
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <polyline points="0 0 50 25 75 150" style="stroke:#000;fill:none"/>
</svg>

attribute

points

各个顶点的 x 轴 y 轴坐标，以空格分隔

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/17/SVG%E4%B8%AD%E7%9A%84polyline%E5%85%83%E7%B4%A0/

本文对你有帮助？请支持我

支付宝
微信