Can't change the value of a attribute of a SVG Path with Javascript

Question

I created a SVG path using snap.svg you can see the code of it down bellow. Now I am trying to cdhange the value of the Attributes for example the strokeWidth. For this i created a text input box and a button that runs a function which should fill in a new value for the strokeWidth. But it does not work. What am i doing wrong? Is it possible that i can't even change the value ? I also posted the code for the input box and the button + my function for changing the strokewidth down bellow

I tried a lot of different functions and scripts but none seemed to work. Sometimes I got an error message sometimes not. When i got an error message it always said that either the function is not defined or L_PUF_WAR is not defined.

var L_PUF_WAR = s.path("m 937.88689,516.10127 v -51.8831 H 573.37482 V 340.49692 H 391.11879 V 276.6408").attr({
                        fill: "none",
                        stroke: "#bada55",
                        strokeWidth: 15,
                        strokeDasharray: "30, 30 ,30"
                    });
                    A_PUF.append(L_PUF_WAR);```

    <script>
        function hallo(){
            var number = document.getElementById("number").value;
            if(number > 0){
                L_PUF_WAR.strokeWidth = number;
            }
        }
    </script>
        <input type="text" id="number" name="number"/><br/>  
        <input type="button" value="breite" onclick="hallo()"/>


I am expecting to put in a value for the strokewidth into the Input Box for example 20 and then the strokeWidth should change to that value..

score 0 · Answer 1 · answered Aug 29 '19 at 09:17

0

Try using .setAttribute():

L_PUF_WAR.setAttribute("strokeWidth", number);

answered Aug 29 '19 at 09:17

Chris Pickford

8,642
5
42
73

also tried that but then I get this error ```Cannot read property 'attr' of undefined at hallo (index.html:197) at HTMLInputElement.onclick (index.html:203) ``` – NoobOnStack Aug 29 '19 at 09:20
What is the scope of `L_PUF_WAR`? – Chris Pickford Aug 29 '19 at 09:32
what do you mean with scope? – NoobOnStack Aug 29 '19 at 09:34
https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript – Chris Pickford Aug 29 '19 at 09:35
if I add this. infront of the ```L_PUF_WAR.strokeWidth = number;``` it says that it cant read property 'attr' of undefined at hallo(). And it should be a global scope – NoobOnStack Aug 29 '19 at 09:42

Can't change the value of a attribute of a SVG Path with Javascript

1 Answers1