Поле ввода SVG

    const wrapper = document.getElementById('wrapper');
    const text = document.getElementById('Username');
    
    const inputWrapper = document.getElementById('input-wrapper');
    const input = document.getElementById('input');
    const button = document.getElementById('button');
    
    
    text.addEventListener('click', () => {
      text.classList.toggle('hide');
      inputWrapper.classList.toggle('hide');
      input.focus();
    });
    
    button.addEventListener('click', () => {
      text.classList.toggle('hide');
      inputWrapper.classList.toggle('hide');
    });
    
    input.addEventListener('change', (e) => {
      text.innerText = e.target.value;
    });

         .cls-1 {
            clip-path: url(#clip-Login_page);
          }
    
          .cls-2 {
            opacity: 0.67;
            fill: url(#pattern);
          }
    
          .cls-3 {
            fill: #d9d9d9;
          }
    
          .cls-3, .cls-5 {
            stroke: #0d0d0d;
          }
    
          .cls-4 {
            fill: url(#pattern-2);
          }
    
          .cls-5 {
            fill: #f2f2f2;
          }
    
          .cls-6, .cls-7 {
            fill: #707070;
            font-family: Georgia;
          }
    
          .cls-6 {
            font-size: 25px;
          }
    
          .cls-7 {
            font-size: 20px;
          }
    
          .cls-8 {
            stroke: none;
          }
    
          .cls-9 {
            fill: none;
          }
    
          .cls-10 {
            fill: #fff;
          }
    
          .cls-11 {
            filter: url(#Rectangle_5);
          }
    
          .cls-12 {
            filter: url(#Amcan_logo);
          }
    
          .cls-13 {
            filter: url(#Rectangle_2);
          }
    	  .hide {
    		display: none;
    		}
 

    <svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "0 0 375 667">
      <defs>
 
        <pattern id = "pattern" preserveAspectRatio = "none" width = "100%" height = "100%" viewBox = "0 0 1920 1080">
          <image width = "1920" height = "1080" xlink:href = "img/Amcan.gif"/>
        </pattern>
        <filter id = "Rectangle_2" x = "11" y = "178" width = "354" height = "63" filterUnits = "userSpaceOnUse">
          <feOffset dy = "5" input = "SourceAlpha"/>
          <feGaussianBlur stdDeviation = "3" result = "blur"/>
          <feFlood flood-opacity = "0.161"/>
          <feComposite operator = "in" in2 = "blur"/>
          <feComposite in = "SourceGraphic"/>
        </filter>
        <pattern id = "pattern-2" preserveAspectRatio = "none" width = "100%" height = "100%" viewBox = "0 0 593 186">
          <image width = "593" height = "186" xlink:href = "img/Amcan_logo.png"/>
        </pattern>
        <filter id = "Amcan_logo" x = "13" y = "28" width = "349" height = "123" filterUnits = "userSpaceOnUse">
          <feOffset dy = "10" input = "SourceAlpha"/>
          <feGaussianBlur stdDeviation = "3" result = "blur-2"/>
          <feFlood flood-opacity = "0.161"/>
          <feComposite operator = "in" in2 = "blur-2"/>
          <feComposite in = "SourceGraphic"/>
        </filter>
        <filter id = "Rectangle_5" x = "77" y = "369" width = "222" height = "63" filterUnits = "userSpaceOnUse">
          <feOffset dy = "5" input = "SourceAlpha"/>
          <feGaussianBlur stdDeviation = "3" result = "blur-3"/>
          <feFlood flood-opacity = "0.161"/>
          <feComposite operator = "in" in2 = "blur-3"/>
          <feComposite in = "SourceGraphic"/>
        </filter>
        <clipPath id = "clip-Login_page">
          <rect width = "375" height = "667"/>
        </clipPath>
      </defs>
    		
      <g id = "Login_page" data-name = "Login page" class = "cls-1">
        <rect class = "cls-10" width = "375" height = "667"/>
        <rect id = "Amcanerino" class = "cls-2" width = "510" height = "667" transform = "translate(-71)"/>
        <g class = "cls-13" transform = "matrix(1, 0, 0, 1, 0, 0)">
          <g id = "Rectangle_2-2" data-name = "Rectangle 2" class = "cls-3" transform = "translate(20 182)">
            <rect class = "cls-8" width = "336" height = "45"/>
            <rect class = "cls-9" x = "0.5" y = "0.5" width = "335" height = "44"/>
          </g>
        </g>
        <g class = "cls-12" transform = "matrix(1, 0, 0, 1, 0, 0)">
          <rect id = "Amcan_logo-2" data-name = "Amcan_logo" class = "cls-4" width = "331" height = "104" transform = "translate(22 28)"/>
        </g>
        <g id = "Rectangle_3" data-name = "Rectangle 3" class = "cls-5" transform = "translate(20 250)">
          <rect class = "cls-8" width = "336" height = "45"/>
          <rect class = "cls-9" x = "0.5" y = "0.5" width = "335" height = "44"/>
        </g>
        <g id = "Rectangle_4" data-name = "Rectangle 4" class = "cls-5" transform = "translate(20 311)">
          <rect class = "cls-8" width = "336" height = "45"/>
          <rect class = "cls-9" x = "0.5" y = "0.5" width = "335" height = "44"/>
        </g>
        <g class = "cls-11" transform = "matrix(1, 0, 0, 1, 0, 0)">
          <g id = "Rectangle_5-2" data-name = "Rectangle 5" class = "cls-3" transform = "translate(86 373)">
            <rect class = "cls-8" width = "204" height = "45"/>
            <rect class = "cls-9" x = "0.5" y = "0.5" width = "203" height = "44"/>
          </g>
        </g>
        <text id = "SUBMIT" class = "cls-6" transform = "translate(139 405)"><tspan x = "0" y = "0">SUBMIT</tspan></text>
    	<text id = "Login" class = "cls-6" transform = "translate(156 214)"><tspan x = "0" y = "0">Login</tspan></text>
    	
    	<div id = "wrapper">
      <text id = "Username" class = "cls-7" transform = "translate(142 280)"><tspan x = "0" y = "0">Username</tspan></text>
      <div id = "input-wrapper" class = "hide">
        <input id = "input" type = "text" value = "Username"/>
        <button id = "button">Submit</button>
      </div>
    </div>
        <text id = "Password" class = "cls-7" transform = "translate(145 341)"><tspan x = "0" y = "0">Password</tspan></text>
      </g>
    </svg>