Как добавить элемент SVG <a>, <title>в тег Div?

Question

Я пытался добавить элемент svg, включенный <a>, <title> в тег <div>.Прямоугольный объект, созданный тегом <g>, показывает на экране, где он должен быть.

Проблема в том, что я хочу использовать теги <a> и <title> с <g>, поэтому при наведении курсора на заголовок моего объекта будет отображаться.

Структура

<div>
  <svg>
    <a>
      <title></title>
      <g>
        <rect>
      </g>
    </a>
  </svg>
</div> 

Эта структура работает, когда я использую ее без jQuery, но когда я использую тег append(), theand, кажется, что он не работает.

Может кто-нибудь объяснить, что я делаю неправильно?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mapping"></div>


<script>
  var o = "<svg height=\"601\" width=\"1301\><g><a href=\"index.html\"><title>DESTINATION1</title><rect x = \"660\" y = \"190\" width=\"20\" height=\"20\" style=\"fill:rgb(255,255,0)\" /></a></g></svg>";
  $("#mapping").append(o);
</script>

Теги a и g не работают при добавлении

Приведенный ниже код работает нормально (если не используется jQuery)

<div>
  <svg height="601" width="1301">
    <g>
      <a href="#">
        <title>Obstacle1</title>	
        <rect x="650" y="160" width="130" height="150" style="fill: grey; fill-opacity: 0.9; stroke: white; stroke-width: 0.5"/>
      </a>
    </g>
  </svg>
</div>

теги a и g работают нормально без добавления