svg marker による矢印

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

上記urlを参考にすると、以下

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100">
  <defs>
    <style>
      circle,line, marker, path
                    { stroke      : #20285A;
                      fill        : none;
                      stroke-width: 1;           }
      line, path    { marker-end  : url(#arrow); }
      text.math_exp { stroke     : #20285A;
                      fill       : #20285A;
                      font-size  : 20px;
                      font-weight: normal;
                      font-family: "Times New Roman";
                      font-style : italic;
                      text-anchor: middle; /* text中心で座標指定 */
      }
    </style>
    <marker id="arrow"
            viewBox="0 0 10 10"
            refX="10" refY="5"
            markerWidth="10" markerHeight="10"
            orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10" />
    </marker>
  </defs>

  <circle cx="100" cy="50" r="15"></circle>
  <text   x ="100" y ="55" class="math_exp">x</text>
  <path   d ="M115,50 l100,0" />
</svg>