svg多边形 文字

If you want a closed SVG shape that is more than a basic circle, ellipse or rectangle, you’ll need to create a polygon.

若要封闭SVG形状大于基本圆形、椭圆形或矩形 ，需要创建多边形。

In SVG, a polygon is any closed shape that consists of straight line segments: SVG doesn’t yet have elements for regular polygons (no <star /> or <hexagon />); instead, it simply allows you to make closed shapes of any kind by specifying points. While three or four-point polygon shapes are easy to code by hand, you’ll probably want to use a graphical editor like Adobe Illustrator, Inkscape or PhotoShop to create more complex designs, exporting them as SVG. Regardless, it’s very useful to understand the basics of SVG polygons, as doing so allows you to “tweak” and alter shapes in code without relying on graphical editors.

在SVG多边形是由直线段组成的任何闭合形状：SVG没有规则的多边形元素(没有<star />或<hexagon /> )； 相反，它只允许您通过指定点制作任何类型的封闭形状。 虽然你可以很容易地手工编写三点或四点的多边形状，但你可能想使用图形编辑器如Adobe Illustrator ，Inkscape或PhotoShop)创建更复杂的设计并将其导出SVG。 无论如何，理解SVG多边形的基础非常有用，因为这样做可以使您在不依赖图形编辑器的情况下“调整”和更改代码中的形状。

最简单的SVG多边形：三角形 (The Simplest SVG Polygon: A Triangle)

Let’s start with the simplest possible shape, using just three points to make a right-angled triangle:

让我们从最简单的形状开始，直角三角形只能用三形：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">     <polygon points="0 0, 100 100, 0 100"/> </svg>

Which creates:

哪个创建：

A few things to note:

注意事项：

• as before, x and y axes have their origin in the top left corner of the viewBox: x goes horizontally, increasing as it moves to the right, y vertically, increasing as it moves downwards.

  和以前一样， x和y轴的原点位于viewBox的左上角 ： x水平移动，向右移动时增加，垂直y ，向下移动时增加。

• the points that make up the polygon are defined as pairs of x and y coordinates.

  构成多边形的点定义为x和y坐标对。

• these coordinate pairs are separated by commas.
  用逗号分隔这些坐标。
• there’s no required directionality to the order of the points: you can start defining any point, and proceed in any direction around the shape. (In the example above, the “top” point of the polygon is defined first, followed by the others in a “clockwise” direction; it would be equally valid to define the bottom left point first and proceed counter-clockwise).
  点的顺序没有要求的方向：您可以开始定义任何点，然后沿形状的任何方向操作。 （在上述示例中，首先定义多边形顶部点，然后在顺时针方向上定义其他点；首先定义左下角的点，逆时针也有效）。
• there’s no need to repeat the first point at the end; SVG knows to “auto-close” the polygon shape.
  最后不需要重复第一点； SVG了解自动关闭多边形。

• stroke, fill and stroke-width are equally applicable to polygon shapes as they are to ellipses, circles and rectangles.

  stroke ， fill和stroke-width也适用于多边形，如椭圆、圆形和矩形。

What if we wanted to create an equilateral triangle? That would mean repositioning just one point:

如果我们想创建一个等边三角形怎么办？ 这意味着只重新定位一点：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">     <polygon points="50 15, 100 100, 0 100"/> </svg>

Which produces:

产生：

交叉填充问题 (The Crossing Fill Problem)

With just three points joined by straight lines, it’s impossible for a polygon’s edges to self-intersect. But at four points, it’s completely possible:

仅用直线连接三个点，多边形边缘不可能自相交。 但从四个方面来看，这是完全可能的:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">     <polygon points="0 20, 100 20, 100 0, 0 100 "/> </svg>

SVG (together with most graphical editors) is completely okay with rendering this result, even if it’s not exactly what you might expect:

SVG(与大多数图形编辑器一起)可以完全渲染这个结果，即使不是你所期望的:

Depending on your intentions, this outcome might mean repositioning the third point, or adding a fifth, to fix the rendering issue.

根据你的意图，这个结果可能意味着重新定位第三点或添加第五点来解决渲染问题。

正则多边形的基础SVG库 (A Basic SVG Lbrary of Regular Polygons)

While you’re likely to create SVG elements in a drawing application, seeing how the code for regular polygons is constructed in SVG is useful. You’re also welcome to copy and use this code in your own creations; each polygon is inside a 100 × 100 unit viewBox.

尽管您可能在绘图应用程序中创建SVG元素，但了解如何在SVG中构造常规多边形的代码很有用。 也欢迎您在自己的作品中复制和使用此代码； 每个多边形都位于100×100单位的viewBox中。

五角大楼 (Pentagon)

<polygon points="26,86 11.2,40.4 50,12.2 88.8,40.4 74,86 " fill="hsl(56,80%,50%)"/>

星 (Star)

<polygon points="50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" fill="hsl(106,80%,50%)"/>

六边形 (Hexagon)

<polygon points="30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5" fill="hsl(156,80%,50%)"/>

八边形 (Octagon)

<polygon points="34.2,87.4 12.3,65.5 12.3,34.5 34.2,12.6 65.2,12.6 87.1,34.5 87.1,65.5 65.2,87.4"  fill="hsl(216,80%,50%)"/>

Now that we’ve covered basic shapes, we’ll move back to lines in the next article: specifically, SVG lines, polylines, and paths.

现在，我们已经介绍了基本形状，在下一篇文章中，我们将回到线：特别是SVG线，折线和路径。

翻译自: https://thenewcode.com/1037/SVG-Shape-Elements-Polygons

svg多边形 文字