How can i convert mif files to svg using xslt transformation for ArrowHeads

Question

Expected output image output generated from xsl transformation

issue : i have marked in red box.

i have converted the mif files with intermediate xml like below for arrowhead.

sample arrowhead : <--

mif:

<PolyLine 
   <Unique 1016926>
   <GroupID 12>
   <HeadCap Square>
   <HeadCap ArrowHead>
   <TailCap Square>
   <NumPoints 2>
   <Point  4.89138" 0.28317">
   <Point  4.18741" 0.28317">
  > # end of PolyLine

IntermediateXml:

<PolyLine>
<Unique keyword="1016926"></Unique>
<GroupID keyword="12"></GroupID>
<HeadCap keyword="Square"></HeadCap>
<HeadCap keyword="ArrowHead"></HeadCap>
<TailCap keyword="Square"></TailCap>
<NumPoints keyword="2"></NumPoints>
<Point keyword=" 440.212460688 25.485696437999998"></Point>
<Point keyword=" 376.856850216 25.485696437999998"></Point>
</PolyLine>

2nd sample arrowhead : -->

mif:

  <PolyLine 
   <Unique 1016991>
   <GroupID 12>
   <PenWidth  0.7 pt>
   <HeadCap Square>
   <HeadCap ArrowHead>
   <TailCap Square>
   <NumPoints 2>
   <Point  4.18887" 0.53202">
   <Point  4.52617" 0.53202">
  > # end of PolyLine

intermediateXml

<PolyLine>
<Unique keyword="1016991"></Unique>
<GroupID keyword="12"></GroupID>
<PenWidth keyword=" 0.7 pt"></PenWidth>
<HeadCap keyword="Square"></HeadCap>
<HeadCap keyword="ArrowHead"></HeadCap>
<TailCap keyword="Square"></TailCap>
<NumPoints keyword="2"></NumPoints>
<Point keyword=" 376.988246712 47.88254482800001"></Point>
<Point keyword=" 407.344437192 47.88254482800001"></Point>
</PolyLine>

3rd sample arrowhead: <-->

mif:

<PolyLine 
   <Unique 1016992>
   <GroupID 12>
   <HeadCap Square>
   <HeadCap ArrowHead>
   <TailCap Square>
   <TailCap ArrowHead>
   <NumPoints 2>
   <Point  4.19177" 0.78086">
   <Point  4.52907" 0.78086">
  > # end of PolyLine

intermediateXml:

<PolyLine>
<Unique keyword="1016992"></Unique>
<GroupID keyword="12"></GroupID>
<HeadCap keyword="Square"></HeadCap>
<HeadCap keyword="ArrowHead"></HeadCap>
<TailCap keyword="Square"></TailCap>
<TailCap keyword="ArrowHead"></TailCap>
<NumPoints keyword="2"></NumPoints>
<Point keyword=" 377.24923975200005 70.278493204"></Point>
<Point keyword=" 407.605430232 70.278493204"></Point>
</PolyLine>

For this 3 sample arrowheads i need svg output. below i have tried the svg output but it is not correct.

For <-- arrowhead SVG tried output:

<defs>
 <marker id="startarrow" markerWidth="10" markerHeight="7" refX="-0" refY="3.5" 
 orient="auto">
 <polygon points="10 0, 10 7, 0 3.5" fill="#000000"/>
 </marker>

 <marker id="endarrow" markerWidth="10" markerHeight="7" refX="8" refY="3.5" 
 orient="auto">
 <polygon points="0 0, 10 3.5, 0 7" fill="#000000"/>
 </marker>
</defs>

<polyline id="line1016926" gid="12" fill="none" fill-opacity="1" fill-rule="nonzero" stroke="#000000" marker-start="url(#startarrow)" points="440.212460688,25.485696437999998 376.856850216,25.485696437999998"/>