svg 折线_SVG形状元素：直线，折线，盖帽和角

svg 折线

If you’re after a line or an open shape, rather than a closed polygon or circle, SVG has two options for you: lines and polylines.

如果您追求的是直线或开放形状 ，而不是封闭的多边形或圆形 ，那么SVG可以为您提供两个选择：直线和折线。

线数 (Lines)

The SVG line syntax may look slightly intimidating at first, but it’s simply being very precise: a line can only consist of two points, and each point is specified by two separate coordinates for x and y.

SVG线的语法乍看起来可能有点吓人，但它非常精确：一条线只能包含两个点，并且每个点由x和y两个单独坐标指定。

Unlike the shapes I’ve explored so far, lines are entirely invisible by default, and will remain so until at least a stroke color is added; once colored, they will remain a hairline until stroke-width specifies a thickness.

与到目前为止我探索过的形状不同， 线条在默认情况下是完全不可见的 ，并且会一直保持到至少添加stroke颜色为止。 一旦着色，它们将保持发际线直到stroke-width指定厚度。

<svg width="300" height="300" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="300" y2="200" stroke-width="20" stroke="black" />
</svg>

Sharp-eyed readers will notice the fact that the end of the stroke is visible before it is cut off by the corners of the viewBox. To guarantee that the stroke appears to go all the way “through” the viewBox, you can use one of two techniques:

敏锐的读者会注意到以下事实：在被viewBox的边角截断之前，笔划的末端是可见的。 为了确保笔划看起来完全贯穿“ viewBox ，可以使用以下两种方法之一：

1. Position the line coordinates beyond the viewBox

   将线坐标放置在viewBox之外

2. Use stroke-linecap: square to extend the end of the line

   使用stroke-linecap: square以延长线的末端

折线 (Polylines)

Polylines are just continued, joined SVG lines with multiple points:

折线只是连续的，有多个点的SVG线连接在一起：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414.3 231.4">
<polyline stroke="#000" stroke-width="6" fill="none" points="15.7,127.9 112.1,15 294.3,205 75,167.9 364.3,36.4 392.1,212.9 "/>
</svg>

Which produces:

产生：

Note that unlike a graphical drawing tool, placing the last point of a polyline at the same location as the opening point will not result in a “closed” shape. But you can still apply fill to a shape:

请注意，与图形绘制工具不同，将折线的最后一点与打开点放置在同一位置不会导致“闭合”形状。 但是您仍然可以将fill应用于形状：

I’ll have more to say about fill in a future article; for now, it’s enough to note that while we can apply a fill to a polyline, and it will usually work as expected, it will provide the appearance of a closed polygon, but it is not the same thing.

我将有更多的说一下fill在以后的文章; 就目前而言，足以说明我们可以将fill应用于折线，并且它通常可以按预期工作，但它会提供封闭多边形的外观 ，但这并不是一回事。

盖帽和角落 (Caps & Corners)

SVG lines that change direction don’t have to be rendered with hard corners; there are two other options, enabled through the stroke-linejoin property: round and bevel, which do exactly what they imply. (Note that you may need to thicken the stroke in order to see any change). A third option, miter, the sharp cornered kind, is the default.

更改方向的SVG线不必使用硬角进行渲染； 还有其他两个选项，可以通过stroke-linejoin属性启用： round和bevel ，它们的作用完全相同。 (请注意，您可能需要加粗笔划才能看到任何变化)。 默认的第三个选项是miter 。

Similarly, the ends of lines can be terminated with three different kinds of cap, using the stroke-linecap property: round (half circles), square (lines are capped with a square, like aglets (the cap at the end of shoelaces), or butt (the default)."

类似地，可以使用stroke-linecap属性使用三种不同的帽来终止线的末端： round (半圆)， square (线被正方形覆盖，就像小鞋一样(鞋带末端的帽)，或butt (默认)。”

Being appearance properties, both stroke-linejoin and stroke-linecap can be applied as either attributes or CSS properties.

作为外观属性， stroke-linejoin和stroke-linecap都可以用作属性或CSS属性。

Stroke and fill can be applied to more than just lines, polygons, and polygons; for example, they can be used to stroke text.

描边和填充不仅可以应用于线条，多边形和多边形，还可以应用于描边和填充。 例如，它们可用于描边文本 。

翻译自: https://thenewcode.com/1042/SVG-Shape-Elements-Lines-PolyLines-Caps-and-Corners

svg 折线