0

I am creating a SVG Path for my Website. Now I want a input box where i can say for example the strokeWidth should be 10 and when i click the button this value should be used by the Path. Is this possible ? Down below you can see the code of my input Box and the Button to set the Width + the code of my SVG Path. Now I am asking you guys how i can connect them.

<input type="number" placeholder="StrokeWidth" id="WidthBox"></input>
<input type="button" name="setStroke" id="setStroke" value="set Stroke"></input>

var L_PUF_WAR = s.path("m 338.57052,275.31046 v 110.41789 h 95.11902 v 39.24491"
                 .attr({
                        fill: "none",
                        stroke: "#bada55",
                        strokeWidth: 15
                    });
  • Get the value of the ``, and put it in the `strokeWidth`? `strokeWidth: $('#myInput').val()` – Abana Clara Aug 28 '19 at 10:59
  • Possible duplicate of [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) – Abana Clara Aug 28 '19 at 11:00
  • I also tried the other tutorial but nothing worked. And your method is also not working. Is it possible that nothing is working because the Path gets created in a onload function? – NoobOnStack Aug 28 '19 at 11:17
  • the only command that didn't seem to screw up the whole svg was this one ```document.getElementById("WidthBox").value``` On every other command i got a complete blank page and on this only my path disapears so i think this one could work out but i don't know how – NoobOnStack Aug 28 '19 at 11:23
  • ` Is it possible that nothing is working because the Path gets created in a onload function`. Just modify the `strokeWidth` attribute even if the path is already rendered. `$('#myPath').attr('strokeWidth', value)` – Abana Clara Aug 28 '19 at 11:30
  • It is not working, all my other SVG elements disappear and only the path gets displayed but i cant even change the value of that so nothing is working – NoobOnStack Aug 28 '19 at 11:38

0 Answers0