title: SVG Input Field
body: <p>I'm trying to make one of my SVG text fields accept input from the user when they press on it. Is there any way of doing that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    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', () =&gt; {
        text.classList.toggle('hide');
        inputWrapper.classList.toggle('hide');
        input.focus();
      });
      
      button.addEventListener('click', () =&gt; {
        text.classList.toggle('hide');
        inputWrapper.classList.toggle('hide');
      });
      
      input.addEventListener('change', (e) =&gt; {
        text.innerText = e.target.value;
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>         .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;
        }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 375 667"&gt;
        &lt;defs&gt;
   
          &lt;pattern id="pattern" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1920 1080"&gt;
            &lt;image width="1920" height="1080" xlink:href="img/Amcan.gif"/&gt;
          &lt;/pattern&gt;
          &lt;filter id="Rectangle_2" x="11" y="178" width="354" height="63" filterUnits="userSpaceOnUse"&gt;
            &lt;feOffset dy="5" input="SourceAlpha"/&gt;
            &lt;feGaussianBlur stdDeviation="3" result="blur"/&gt;
            &lt;feFlood flood-opacity="0.161"/&gt;
            &lt;feComposite operator="in" in2="blur"/&gt;
            &lt;feComposite in="SourceGraphic"/&gt;
          &lt;/filter&gt;
          &lt;pattern id="pattern-2" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 593 186"&gt;
            &lt;image width="593" height="186" xlink:href="img/Amcan_logo.png"/&gt;
          &lt;/pattern&gt;
          &lt;filter id="Amcan_logo" x="13" y="28" width="349" height="123" filterUnits="userSpaceOnUse"&gt;
            &lt;feOffset dy="10" input="SourceAlpha"/&gt;
            &lt;feGaussianBlur stdDeviation="3" result="blur-2"/&gt;
            &lt;feFlood flood-opacity="0.161"/&gt;
            &lt;feComposite operator="in" in2="blur-2"/&gt;
            &lt;feComposite in="SourceGraphic"/&gt;
          &lt;/filter&gt;
          &lt;filter id="Rectangle_5" x="77" y="369" width="222" height="63" filterUnits="userSpaceOnUse"&gt;
            &lt;feOffset dy="5" input="SourceAlpha"/&gt;
            &lt;feGaussianBlur stdDeviation="3" result="blur-3"/&gt;
            &lt;feFlood flood-opacity="0.161"/&gt;
            &lt;feComposite operator="in" in2="blur-3"/&gt;
            &lt;feComposite in="SourceGraphic"/&gt;
          &lt;/filter&gt;
          &lt;clipPath id="clip-Login_page"&gt;
            &lt;rect width="375" height="667"/&gt;
          &lt;/clipPath&gt;
        &lt;/defs&gt;
        
        &lt;g id="Login_page" data-name="Login page" class="cls-1"&gt;
          &lt;rect class="cls-10" width="375" height="667"/&gt;
          &lt;rect id="Amcanerino" class="cls-2" width="510" height="667" transform="translate(-71)"/&gt;
          &lt;g class="cls-13" transform="matrix(1, 0, 0, 1, 0, 0)"&gt;
            &lt;g id="Rectangle_2-2" data-name="Rectangle 2" class="cls-3" transform="translate(20 182)"&gt;
              &lt;rect class="cls-8" width="336" height="45"/&gt;
              &lt;rect class="cls-9" x="0.5" y="0.5" width="335" height="44"/&gt;
            &lt;/g&gt;
          &lt;/g&gt;
          &lt;g class="cls-12" transform="matrix(1, 0, 0, 1, 0, 0)"&gt;
            &lt;rect id="Amcan_logo-2" data-name="Amcan_logo" class="cls-4" width="331" height="104" transform="translate(22 28)"/&gt;
          &lt;/g&gt;
          &lt;g id="Rectangle_3" data-name="Rectangle 3" class="cls-5" transform="translate(20 250)"&gt;
            &lt;rect class="cls-8" width="336" height="45"/&gt;
            &lt;rect class="cls-9" x="0.5" y="0.5" width="335" height="44"/&gt;
          &lt;/g&gt;
          &lt;g id="Rectangle_4" data-name="Rectangle 4" class="cls-5" transform="translate(20 311)"&gt;
            &lt;rect class="cls-8" width="336" height="45"/&gt;
            &lt;rect class="cls-9" x="0.5" y="0.5" width="335" height="44"/&gt;
          &lt;/g&gt;
          &lt;g class="cls-11" transform="matrix(1, 0, 0, 1, 0, 0)"&gt;
            &lt;g id="Rectangle_5-2" data-name="Rectangle 5" class="cls-3" transform="translate(86 373)"&gt;
              &lt;rect class="cls-8" width="204" height="45"/&gt;
              &lt;rect class="cls-9" x="0.5" y="0.5" width="203" height="44"/&gt;
            &lt;/g&gt;
          &lt;/g&gt;
          &lt;text id="SUBMIT" class="cls-6" transform="translate(139 405)"&gt;&lt;tspan x="0" y="0"&gt;SUBMIT&lt;/tspan&gt;&lt;/text&gt;
       &lt;text id="Login" class="cls-6" transform="translate(156 214)"&gt;&lt;tspan x="0" y="0"&gt;Login&lt;/tspan&gt;&lt;/text&gt;
       
       &lt;div id="wrapper"&gt;
        &lt;text id="Username" class="cls-7" transform="translate(142 280)"&gt;&lt;tspan x="0" y="0"&gt;Username&lt;/tspan&gt;&lt;/text&gt;
        &lt;div id="input-wrapper" class="hide"&gt;
          &lt;input id="input" type="text" value="Username"/&gt;
          &lt;button id="button"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
          &lt;text id="Password" class="cls-7" transform="translate(145 341)"&gt;&lt;tspan x="0" y="0"&gt;Password&lt;/tspan&gt;&lt;/text&gt;
        &lt;/g&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the amended code as suggested by Solo.</p>