矢量图形-基本形状-绘制SVG多边形-前端-HTML5-书闪BookChips

124 - 矢量图形 - 基本形状 - 绘制 SVG 多边形

作者：

贺及楼

成为作者

更新日期：2025-02-27 13:01:45

矢量图形 - 基本形状 - 绘制 SVG 多边形

在前端开发中，SVG（可缩放矢量图形）是一项强大的技术，它允许我们创建高质量的、可缩放的图形。SVG 多边形是 SVG 中一种重要的基本形状，能够帮助我们绘制出各种复杂的图形。本文将深入介绍如何绘制 SVG 多边形，同时提供实用的演示代码。

什么是 SVG 多边形

SVG 多边形是由一组首尾相连的直线段组成的封闭图形。在 SVG 中，使用 <polygon> 元素来创建多边形。与其他 SVG 元素一样，多边形也是基于 XML 语法的，这意味着它们可以轻松地嵌入到 HTML 文档中。

`<polygon>` 元素的基本语法

<polygon> 元素的基本语法如下：

<svg width="宽度" height="高度">
  <polygon points="点列表" fill="填充颜色" stroke="边框颜色" stroke-width="边框宽度" />
</svg>

points：这是一个必需的属性，它定义了多边形各个顶点的坐标。坐标值是由一系列的 x,y 对组成，每对坐标之间用空格、逗号或换行符分隔。
fill：可选属性，用于定义多边形的填充颜色，默认值为 black。
stroke：可选属性，用于定义多边形的边框颜色。
stroke-width：可选属性，用于定义多边形边框的宽度。

绘制简单的多边形示例

下面是一个绘制三角形的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG 三角形示例</title>
</head>
<body>
  <svg width="200" height="200">
    <polygon points="100,10 190,190 10,190" fill="blue" stroke="black" stroke-width="2" />
  </svg>
</body>
</html>

在这个示例中，我们创建了一个宽度和高度都为 200 的 SVG 画布。<polygon> 元素的 points 属性定义了三角形的三个顶点坐标：(100, 10)、(190, 190) 和 (10, 190)。填充颜色为蓝色，边框颜色为黑色，边框宽度为 2。

绘制复杂的多边形

通过定义更多的顶点坐标，我们可以绘制出更复杂的多边形。下面是一个绘制五边形的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG 五边形示例</title>
</head>
<body>
  <svg width="200" height="200">
    <polygon points="100,10 190,70 160,160 40,160 10,70" fill="green" stroke="black" stroke-width="2" />
  </svg>
</body>
</html>

在这个示例中，我们定义了五边形的五个顶点坐标，从而绘制出一个五边形。填充颜色为绿色，边框颜色为黑色，边框宽度为 2。

总结

属性	描述
`points`	定义多边形各个顶点的坐标，是必需属性
`fill`	定义多边形的填充颜色，默认值为 `black`
`stroke`	定义多边形的边框颜色
`stroke-width`	定义多边形边框的宽度

通过使用 <polygon> 元素和 points 属性，我们可以轻松地绘制出各种形状的多边形。SVG 多边形的优点在于它们是矢量图形，无论放大或缩小都不会失真，非常适合用于创建响应式的网页设计。希望本文能帮助你更好地理解和使用 SVG 多边形。