Align SVG to a form border

prettyMaria 0
Viewed 29

So I have two tags buttons: admin and user, and bellow them a Login form and I want to do a little arrow pointing at what tag button is active. I have the code to form the arrow but I don't know how to align it to the top border pointing at the user.(with the animation process). Any ideas?

<svg
  className="svg-arrow" 
  width="66" height="18" viewBox="0 0 66 18" 
  xmlns="http://www.w3.org/2000/svg" 
  >
  <rect width="66" height="18" fill="#222222" />
  <path
    fill="#222222"
    stroke="#909090"
    d="M 0 17.886 C 12.855 16.446 28.613 20.401 33 -0.025"
  />
  <path
    fill="#222222"
    stroke="#909090"
    d="M 33 0 C 46.053 1.44 61.706 -2.515 66 16.911"
    transform="matrix(-1, 0, 0, -1, 100 17.911)"
  />
</svg>
javascript css html
1 Answers

Try this:

function el(id){
  return(document.getElementById(id));
}
function selectUser(){
  el("arrow").style.top = (el("user").getBoundingClientRect().top + (el("user").getBoundingClientRect().height / 4)) + "px";
  el("arrow").style.left = (el("user").getBoundingClientRect().left + el("user").getBoundingClientRect().width + 10) + "px";
}
function selectAdmin(){
  el("arrow").style.top = (el("admin").getBoundingClientRect().top + (el("admin").getBoundingClientRect().height / 4)) + "px";
  el("arrow").style.left = (el("admin").getBoundingClientRect().left + el("admin").getBoundingClientRect().width + 10) + "px";
}
function clearSelection(){
  el("arrow").style.top = "-10px";
  el("arrow").style.left = "-50px";
}
#arrow{
  display: block;
  top: -10px;
  left: -50px;
  position: absolute;
}
#user, #admin, #clear{
  width: 100px;
}
<button id="user" onclick="selectUser();">User</button><br>
<button id="admin" onclick="selectAdmin();">Admin</button><br>
<button id="clear" onclick="clearSelection();">Clear</button>
<svg width="50px" height="10px" viewbox="50,10" id="arrow">
  <path d="M50,5 L0,5 L5,0 L5,10 L0,5" fill="#000000" stroke="#000000"/>
</svg>

Major_Flux-0
Related