如何在div标签中附加<a>，<title>中包含的svg元素？

Question

我尝试在<a>标签中附加包含<title>，<div>的svg元素。由<g>标签创建的矩形对象应显示在屏幕上。

问题是我想将<a>和<title>标记与<g>一起使用，这样当我将光标指向对象标题时就会出现。

结构为

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

当我在不使用jQuery的情况下使用此结构时，但是当我使用append( ), the and`标签时，该结构似乎混乱了。

任何人都可以解释我在做什么吗？

<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 and g tag not working on append

下面的代码工作正常（当不使用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 and g tag work fine without append