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

Question

I have a textfield and am trying to pass its text along to an SVG textPath .

At first I thought I could use an ID to update the text inside of the textPath, but the SVG does not seem to recognize the HTML. So in my searches I've encountered conversations about using HTMLinner(?) and foreign objects(?) to handle this, but no real examples.

Here's my work so far.

 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

The SVG text element doesn't have innerHtml , it's textContent that you want to use

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>