使用web动画设置SVG矩形元素的宽度属性（不是CSS属性）的动画

我正在使用web动画API通过更改SVG元素的宽度来设置其动画：

<svg id="svg" width="300px" height="500px">
        <rect id="backgroundBar" x="15" y="8" width="4" height="10" rx="2" ry="2"/>
        </svg>

var elem = document.querySelector('#backgroundBar');

elem.animate([
             {width: "0px"},
             {width: "100px"}
             ], {
             direction: 'alternate',
             duration: 5000,
             iterations: Infinity,
             fill: 'forwards'
             }); 

var elem=document.querySelector（“#backgroundBar”）；
动画元素([
{宽度：“0px”}，
{宽度：“100px”}
], {
方向：'交替'，
持续时间：5000，
迭代：无限，
填充：“前锋”
}); 

但它会设置CSS属性宽度的动画，而不是元素的属性宽度，这不会导致元素发生任何更改

是否有方法在属性宽度上应用动画

---

谢谢

它正在开发中。谢谢您提供此信息