SVG path绘制线段与圆形点位不符 两点间连线未正常显示

SVG路径的V（垂直绘制线段）命令不支持用逗号分隔多个目标坐标值，你代码里写的d="M 0 31.5 V 0,72"属于不符合规范的语法：

• 浏览器解析时只会识别V后面第一个有效值0，逗号和后面的72会被判定为无效内容直接忽略
• 最终实际渲染的路径只有从起点(0,31.5)向上到(0,0)的线段，根本不会绘制到下方(0,72)圆点的位置，自然两个圆点之间看不到预期连线。

把路径语法改成符合SVG规范的写法即可，两种常用正确写法：

• 方案1：连续调用两次V命令，分别指定两个垂直方向的终点

  <path d="M 0 31.5 V 0 V 72" fill="none" id="bust" stroke="black"/>
  

• 方案2：如果不需要(0,0)到(0,72)之间穿过中间圆点的多余线段，可以在画完上半段后，重新移动到中间圆点位置再画下半段，渲染效果更精准：

  <path d="M 0 31.5 V 0 M 0 31.5 V 72" fill="none" id="bust" stroke="black"/>
  

语法补充：SVG路径中，逗号仅能用于分隔同一个坐标点的x、y值，不能用来分隔多个不同点位的坐标；V、H这类单轴画线命令每次仅支持传入1个目标坐标值，需要绘制多段时必须重复写命令。

内容的提问来源于stack exchange，提问作者user3363295