SVG 入门指北（一）：简介、特点、浏览器支持情况、数值单位
SVG 入门指北（二）：理解画布、视窗、视野
SVG 入门指北（三）：矩形、圆形、椭圆
SVG 入门指北（四）：线条、多边形、多线条、文本、路径

SVG 线条 - line

部分参数	说明
x1	线条起点 X 轴坐标
y1	线条起点 Y 轴坐标
x2	线条终点 X 轴坐标
y2	线条终点 Y 轴坐标
opacity	线条整体不透明度（0 ～ 1）
stroke	线条颜色
stroke-width	线条宽度
stroke-opacity	线条颜色不透明度（0 ～ 1）
stroke-linecap	butt(默认):端点不延伸 / round:延伸一个以宽度为直径的半圆 / square:延伸一个宽度为线条宽度一半的矩形

线条宽度50px相当于向中心线两侧各延展25px，视野默认对齐视窗，所以案例中线条上半部分超出视野不可见。此处为了演示使用overflow:visible展现。

官方文档 - line

SVG 多边形 - polygon

首尾端点自动相连，闭合形状

部分参数	说明
points	多边形端点数组（"0,100 50,50 100,50"）
fill	多边形填充色
opacity	多边形整体不透明度（0 ～ 1）
stroke	边框颜色
stroke-width	边框宽度
stroke-opacity	边框颜色不透明度（0 ～ 1）

官方文档 - polygon

SVG 多线条 - polyline

首尾端点不相连

部分参数	说明
points	端点数组（"0,100 50,50 100,50"）
fill	填充色（默认黑色）
opacity	整体不透明度（0 ～ 1）
stroke	线条颜色
stroke-width	线条宽度
stroke-opacity	线条颜色不透明度（0 ～ 1）

官方文档 - polyline

SVG 文本 - text

部分参数	说明
x	文本在 X 轴坐标
y	文本在 Y 轴坐标
font-size	字体大小
text-anchor	文本与坐标对齐方式。start:左对齐；middle:局中对齐；end:右对齐
fill	文本颜色

官方文档 - text

SVG 路径 - path

先看示例

d 绘制路径，参数是由下方路径命令组成的列表，其中的每一个命令由命令字母和用于表示命令参数的数字组成。

• 移动到：M、m
• 画线至：L、l、H、h、V、v
• 三次方贝塞尔曲线：C、c、S、s
• 二次方贝塞尔曲线：Q、q、T、t
• 椭圆曲线：A、a
• 封闭路径：Z、z

命令是大小写敏感的。大写的命令指定绝对坐标，而小写命令指定相对（于当前位置的）坐标。 参数复杂繁多，详情查看官方对命令的详述

官方文档 - path