javascript - SVG 补丁未清除

Question

感谢您的提前，我已将以下代码与 (MoveTo Lineto) 一起使用，

<svg height="200" width="500">
      <path fill='none' stroke-width="30" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 L 418 117.5"/>
 </svg>

它显示得很好，但是当我使用相同的(MoveTo Lineto MoveTo)

<svg height="200" width="500">
      <path fill='none' stroke-width="30" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 M 254 117.5 L 418 117.5">
</svg>

.5 像素有所不同，请检查所附图片。

为什么会有这样的差异？以及如何解决？样本: http://jsfiddle.net/3t8rspd1/1/

Answer 1

请从 x 位置减去笔画宽度的一半。你会得到正确的路径。例如。如果描边宽度是 20 的平均值减去第二个 MoveTo 的 10。

计算 254-(storkeWidth/2) = 244。如果行程宽度为 20。

<svg height="200" width="500">
  <path fill='none' stroke-width="20" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 M 244 117.5 L 418 117.5"/>
</svg>

Fiddle