javascript - SVG 输入字段

Question

我试图让我的 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>

这是 Solo 建议的修改后的代码。

Answer 1

<tspan> 和 <text>不是 html 元素，而是具有自己属性的 svg 元素。 tspan 上不存在 contenteditable 属性(您可以通过 console.log document.querySelector("#myTspan").isContentEditable ，它将返回 undefined 。

但是，它可以继承其父项的属性。因此，如果是 HTML 文件中的内联 svg，将 svg 包装在可编辑元素中将在某些浏览器中工作，但所有文本都是可编辑的。

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

在独立的 SVG 中，您无法让 contenteditable 工作，因为它是 HTML 规范的一部分，而不是 SVG 的一部分。

您必须按照其他答案的建议使用脚本，但请仔细阅读(因为您一开始没有提到它是一个独立的 svg):Including JavaScript in SVG