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中，您无法进行可编辑的内容，因为它是HTML规范的一部分，而不是SVG的一部分。

您必须按照其他答案的建议使用脚本，但请仔细阅读（因为起初您没有提到它是独立的svg）：Including JavaScript in SVG

Answer 2

在contenteditable上使用tspan

在此处查看更多-https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

它如何工作？

您要做的就是在几乎所有HTML元素上设置contenteditable属性，以使其可编辑。

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>

Answer 3

非常感谢您的帮助！我发现我可以使用JavaScript“提示”形式来实现此目的。我要做的就是实现以下内容：

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

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

我完全忘记了提示形式的存在！再次感谢大家：）

Answer 4

是的，不是，您不能直接编辑文本，但是可以将输入内容放在文本上方。请参见下面的代码：

8 min 15 sec 
7 m 12 s 
15 mi 25 s

.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;
}

Answer 5

不需要jquery或JS，只需将<div class="cr1"> <div class="cr2"> </div> </div> .cr1{ border: 10px solid #bababa; width: 232px; border-radius: 50%; } .cr2{ background: #bababa; width: 150px; height: 150px; border-radius: 56%; display: inline-block; border: 41px solid #fff; }添加到该文本元素，即可完成...

contenteditable="true"

SVG输入栏

5 个答案: