メニューバーをSVGのButtomで表したい。

Question

<div id="nav_buttom">
  <svg width= "1500" height= "65" >
  <g id="menu_buttom" Class="" weght="100" hight="65">
  <line x1="30" y1="31"  x2="55" y2="31"
        stroke="black" stroke-width="5" stroke-linecap="round" />
  <line x1="30" y1="40" x2="55" y2="40"
        stroke="black" stroke-width="5" stroke-linecap="round" />
  <line x1="30" y1="49" x2="55" y2="49"
        stroke="black" stroke-width="5" stroke-linecap="round" />
 </g>
</svg>

メニューを表示させるボタンの画を制作しました。
ボタンを押した後に、以下のJquaryでメニューリストを表示させたいのですが、SVGにリンクを埋め込んでも、マウスが表示されません。
このsvgで制作した図を消すことなく、ボトムとして利用することは可能でしょうか。どなたかご教授願います。

<script type="text/javascript">
$('#nav_buttom').click(function () {
  $('#nav').css({
    top: -200,
    left: 400
  }).on('transitionend', function () {
      $(this).css({
        top: 0,
        left: 0
      }).off('transitionend');
  });
});
</script>

Comments

[kei344]

「ボトムとして利用」とはなんのことでしょう。書かれているHTMLも半端なため、何をどのようにしたくて何処で詰まっているのかがわかりません。