如何使用JQuery修改SVG的宽度

Posted 2023-02-17

我正在使用Articulate Storyline，我想使用Javascript修改我在软件中创建的行宽。

我已经知道我可以使用以下代码行选择任何项目（每个项目都输出到Storyline输出中的SVGs）：

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

然后我们应该能够执行一些jQuery动画...

问题是我无法使用以下代码修改所选行的width属性：

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

它只是将线的位置向右更改了500 px！什么？！

任何建议将不胜感激。

请注意：这个问题与Storyline无关，都是关于SVG和jquery的。

答案

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);
)