svg - 使用 web 动画为 SVG rect 元素的宽度属性（不是 CSS 属性）设置动画

Question

我正在使用 web-animations 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'
             }); 

但它动画 CSS 属性宽度而不是元素的属性宽度，这导致元素根本没有变化。

有没有办法在属性宽度上应用动画？

谢谢