上一节:
下一节:

  SVG 多边形

  • 定义和使用

    <polygon> 元素用于创建至少包含三个侧面的图形。
    多边形是由直线组成的,形状是“封闭的”(所有线都连接起来)。
    多边形来自希腊语。 “聚”是指“许多”,“多边形”是指“角度”。
  • 示例

    下面的示例创建一个具有三个边的多边形:
    抱歉,您的浏览器不支持嵌入式SVG。 &nbsp;
    下面是 SVG 代码
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到菜鸟教程</title>
    </head>
    <body>
      <h1>SVG 多边形</h1>
      <svg height="210" width="500">
        <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
      </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="250" width="500">
        <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
      </svg>
    </body>
    </html>
    
    尝试一下
    使用 <polygon> 元素创建一个星星:
    抱歉,您的浏览器不支持嵌入式SVG。 &nbsp;
    下面是 SVG 代码
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到菜鸟教程</title>
    </head>
    <body>
      <h1>SVG 多边形</h1>
      <svg height="250" width="500">
        <polygon points="100,10 40,198 190,78 10,78 160,198"
        style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
      </svg>
    </body>
    </html>
    
    尝试一下
    fill-rule 属性更改为 “evenodd”:
    抱歉,您的浏览器不支持嵌入式SVG。 &nbsp;
    下面是 SVG 代码
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到菜鸟教程</title>
    </head>
    <body>
      <h1>SVG 多边形</h1>
      <svg height="250" width="500">
        <polygon points="100,10 40,198 190,78 10,78 160,198"
        style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
      </svg>
    </body>
    </html>
    
    尝试一下
上一节:
下一节: