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.如果strokeWidth为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

Answer 2

stroke-linejoin

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