svg绘制箭头，箭头中的文本居中显示且两边和箭头的线段间隔2px

好的，关于绘制箭头，你可以使用SVG的`<marker>`元素来绘制，具体方法如下：

1.首先定义一个箭头的`<marker>`元素，例如：

<defs>
  <marker id="arrow" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto">
    <path d="M1,1 L7,4 L1,7 L4,4 Z" fill="#000000" />
  </marker>
</defs>

其中`id`属性是用来标识这个箭头的，`markerWidth`和`markerHeight`是箭头的宽度和高度，`refX`和`refY`是箭头的参考点，`orient`是箭头的方向。

2.在使用箭头的线段上添加`marker-end`属性，例如：

<line x1="10" y1="10" x2="50" y2="50" stroke="#000000" stroke-width="2" marker-end="url(#arrow)" />

其中`marker-end`属性的值是箭头的`id`值。

至于如何在箭头中添加文本并居中显示，你可以使用`<text>`元素在箭头的中心位置添加文本，例如：

<line x1="10" y1="10" x2="50" y2="50" stroke="#000000" stroke-width="2" marker-end="url(#arrow)" />
<text x="30" y="30" text-anchor="middle" dominant-baseline="middle">Hello World</text>

其中`x`和`y`是文本的坐标，`text-anchor`是文本的水平对齐方式，`dominant-baseline`是文本的垂直对齐方式。

至于如何实现文本和箭头的线段之间间隔2px的效果，你可以使用`<rect>`元素在箭头中心位置添加一个透明的矩形，然后将文本放在矩形内部，例如：

<line x1="10" y1="10" x2="50" y2="50" stroke="#000000" stroke-width="2" marker-end="url(#arrow)" />
<rect x="28" y="28" width="4" height="4" fill="none" />
<text x="30" y="30" text-anchor="middle" dominant-baseline="middle" font-size="12">Hello World</text>

其中`x`和`y`是矩形的左上角坐标，`width`和`height`是矩形的宽度和高度，`fill`属性设置为`none`表示矩形透明。同时，你可以通过调整矩形的大小和文本的字体大小来控制文本和箭头线段之间的间隔。