svg 折线
If you’re after a or an , 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, , 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 ，以下两种方法之一：
Position the line coordinates beyond the
viewBox放置线坐标
viewBox之外Use
stroke-linecap: squareto 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-lnecap都可以用作属性或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 折线