使用 HTML 文本字段沿 SVG textPpath 更新文本答案

【问题标题】：Using HTML text-field to update text along an SVG textPpath使用 HTML 文本字段沿 SVG textPpath 更新文本
【发布时间】：2015-12-23 20:03:42
【问题描述】：

我有一个文本字段，正在尝试将其文本传递给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/

【问题讨论】：

标签： javascript html svg svg-filters

【解决方案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>

【讨论】：

感谢您的快速回复，意义重大！