javascript - 使用 HTML 文本字段沿 SVG textPpath 更新文本

Question

我有一个文本字段，正在尝试将其文本传递到 an SVG textPath .

起初我以为我可以使用 ID 来更新 textPath 内的文本，但 SVG 似乎无法识别 HTML。因此，在我的搜索中，我遇到过有关使用 HTMLinner(?) 和外部对象(?) 来处理此问题的对话，但没有真正的示例。

这是我迄今为止的工作。

function edValueKeyPress() {
  var edValue = document.getElementById("edValue");
  var s = edValue.value;

  var lblValue = document.getElementById("lblValue");
  lblValue.innerText = "" + s;

  //var s = $("#edValue").val();
  //$("#lblValue").text(s);    
}

<!-- create text field -->
<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">
<br>

<!-- update label with field -->
<span id="lblValue"></span>

<!-- SVG path -->
<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath" d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="red" />

  <!--handle text along path -->
  <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath" id="lblValue">
      Form text should go here
    </textPath>
  </text>

  <!-- Show outline of the viewport using 'rect' element -->
  <rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" />
</svg>

jsFiddle:https://jsfiddle.net/2pr8evoe/2/

Answer 1

SVG 文本元素没有 innerHtml，您要使用的是 textContent

lblValue.textContent = s;

https://jsfiddle.net/2pr8evoe/3/

function edValueKeyPress() {
  var edValue = document.getElementById("edValue");
  var s = edValue.value;

  var lblValue = document.getElementById("lblValue");
  lblValue.textContent =s;
}

<!-- create text field -->
<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">
<br>

<!-- SVG path -->
<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath" d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="red" />

  <!--handle text along path -->
  <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath" id="lblValue">
      Form text should go here
    </textPath>
  </text>

  <!-- Show outline of the viewport using 'rect' element -->
  <rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" />
</svg>