SVG 折线

  • 定义和使用

    <polyline> 元素用于创建仅由直线(在多个点相连)组成的任何形状。
  • 示例

    下面的示例创建多个点相连的折线:
    抱歉,您的浏览器不支持嵌入式SVG。 &nbsp;
    下面是 SVG 代码
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到菜鸟教程</title>
    </head>
    <body>
      <h1>SVG 折线</h1>
      <svg height="200" width="500">
        <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
        style="fill:none;stroke:black;stroke-width:3" />
      </svg>
    </body>
    </html>
    
    尝试一下
    SVG 代码说明:
    • points 属性定义绘制折线所需的点列表(xy坐标对)
    下面示例演示了仅有直线相连的折线:
    抱歉,您的浏览器不支持嵌入式SVG。 &nbsp;
    下面是 SVG 代码
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到菜鸟教程</title>
    </head>
    <body>
      <h1>SVG 折线</h1>
      <svg height="200" width="500">
        <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
      style="fill:white;stroke:red;stroke-width:4" />
      </svg>
    </body>
    </html>
    
    尝试一下