i have textfield , trying pass text along an svg textpath.
at first thought use id update text inside of textpath, svg not seem recognize html. in searches i've encountered conversations using htmlinner(?) , foreign objects(?) handle this, no real examples.
here's work 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 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 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/
the svg text element doesn't have innerhtml, it's textcontent want 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 viewport using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" /> </svg>
Comments
Post a Comment