How to modify the width of SVGs with JQuery

Question

I'm using Articulate Storyline and I want to modify the width of a line that I've created in the software using Javascript.

I already know that I can select any items (every item export to SVGs in Storyline's output) using This line of code:

 var item = $('[aria-label="Ourline"] svg')

Then we should be able to do some jQuery animations...

The problem is I can't modify the width attribute of the selected line using code below:

 $(item).attr("width","500");

It just changes the position of the line 500 px to the right! What?!

Any suggestions would be appreciated.

Please note: The question has nothing to do with Storyline, It's all about SVGs and jquery.

Answer 1

https://jsfiddle.net/whLf02n8/

html:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<button id="7">7</button>
<button id="3">3</button>

javascript:

$('button').click(function() {
    const id = $(this).attr('id');
  $('svg circle').attr('stroke-width', id);
})