SOURCE

var index = 0
var btn = document.getElementById('mybutton');
var tab = document.getElementById('tab1');
btn.onclick = function() { 
 
tab.transform = 'translate('+ index + ',2)'
  index = 10 + index
  console.log(index, tab)
};

<div>
  <button id="mybutton">点击</button>
  <svg width="400" height="140" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="tabButton">
      <path d="M 0 20 c 12.8 0 7.2 -20 20 -20 l 60 0 c 12.8 0 7.2 20 20 20" fill="rgba(6,15,95,0.4)" stroke="#61BBF7" stroke-width="2"/>
      <line x1="100" y1="20" x2="300" y2="20" stroke-width="2" stroke="#61BBF7"/>
      <line x1="-380" y1="20" x2="0" y2="20" stroke-width="2" stroke="#61BBF7"/>
    </g>
  </defs>
  <g transform="translate(10,2)" id="tab1">
    <use xlink:href="#tabButton"/>
  </g>
</svg>
</div>

div{
  background:red
}