使用HTML文本字段沿SVG文本更新文本Ppath

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>