SVG Input Field

Question

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?

    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>

This is the amended code as suggested by Solo.

It's quite tricky. In order to be able to edit svg text you have to put the svg inside a contenteditable element. However you need a way to protect the rest of the content inside the svg from being deleted. This is a pen where the text inside the SVG is editable: [SVG contenteditable Skills](https://codepen.io/enxaneta/pen/PEmQpa) Also: you have `
`s inside your svg but you are not using `` This is not valid code — enxaneta, Nov 30 '18 at 15:00

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

<tspan> and <text> are not html elements, but svg elements with their own attributes. The property contenteditable doesn't exist on tspan (you can console.log document.querySelector("#myTspan").isContentEditable, it will return undefined.

However, it can inherit properties from its parents. So in case of an inline svg in a HTML file, wrapping your svg in an editable element will work in some browsers, but all you texts are then editable.

<div contenteditable="true">
<svg>
<text id="Username" class="cls-7" transform="translate(142 20)"><tspan x="0" y="0">Username</tspan></text>
</svg>
</div>

In a standalone SVG, you have no way to have contenteditable working since it's part of HTML specification, not that of SVG.

You have to go for a script as other answers suggest, but read carefully (since you didn't mentionned at first that it was a standalone svg) : Including JavaScript in SVG

Text 'Username' has now disappeared, however I'm still not able to add any text in its place :( — Daniel Klas, Nov 30 '18 at 13:16

Ted · Answer 2 · 2018-12-01T22:42:42.990

Yes and no, you can't edit the text directly, but you can put an input overtop of it. See the code below:

.input-real {
  background: rgba(255, 255, 255, 0);
  color: transparent;
  padding: 0;
  border: 0 none transparent;
  line-height: 0;
}

.input-real:focus {
  background: rgba(255, 255, 255, 1);
  color: #333;
}

.input-real,
.input-mimic {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

<svg viewBox="0 0 375 667">
  <text id="Username" class="input-mimic" x="50" y="50" alignment-baseline="hanging">Username</text>
  <foreignObject width="50" height="23" x="50" y="46">
    <input id="input" class="input-real" type="text" value="Username"/>
  </foreignObject>
</svg>

MakeLoveNotWar · Answer 3 · 2018-11-30T12:26:41.167

0

use contenteditable on tspan

see more here - https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

How does it work?

All you have to do is set the contenteditable attribute on nearly any HTML element to make it editable.

function toggleEdit() {
  var text = document.getElementById('Username');
  var tspan = text.firstElementChild;
  tspan.setAttribute('contenteditable', true);
}

<text id="Username" class="cls-7" transform="translate(142 280)"><tspan x="0" y="0">Username</tspan></text>
<div><button onclick="toggleEdit();">Edit input</button></div>

edited Nov 30 '18 at 12:26

answered Nov 30 '18 at 12:17

MakeLoveNotWar

956
9
25

I think it is meant for HTML's
only, it does not seem to work when I change the code :(
– Daniel Klas Nov 30 '18 at 12:23
@DanielKlas https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content#How_does_it_work – MakeLoveNotWar Nov 30 '18 at 12:24
How does relate to editable SVG elements as the OP asked? – 40detectives Apr 20 '21 at 02:34

score 0 · Answer 4 · answered Nov 30 '18 at 16:15

Thank you very much for your help guys! I have found out that I can just use JavaScript 'prompt' form to achieve this. All I had to do was to implement the following:

<script>
 function changeUsername()
 {
  document.getElementById('Username').textContent = prompt("Please enter your Username");
 }
 </script>

<rect onclick="changeUsername()" class="cls-8" width="336" height="45"/>

I completely forgot that the prompt form existed! Again, thank you all :)

score -1 · Answer 5 · answered Nov 30 '18 at 12:56

-1

No need of jquery or JS, Just add contenteditable="true" to that text element and you're done...

<text contenteditable="true" id="Username" class="cls-7" transform="translate(142 280)"><tspan x="0" y="0">Username</tspan></text>

answered Nov 30 '18 at 12:56

ElusiveCoder

1,593
1
8
23

It doesn't allow me to change the text. – Daniel Klas Nov 30 '18 at 13:14
Yes, the snippet on this site is working perfectly, but when I add it to my document it simply does nothing – Daniel Klas Nov 30 '18 at 13:22

SVG Input Field

5 Answers5