Animate width attribute (not CSS property) of a SVG rect element using web-animations

Question

I'm using web-animations API to animate a SVG element by changing its width:

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

but it animates the CSS property width and not the element's attribute width which results in no changes in the element at all.

Is there a way to apply the animation over the attribute width?

Thanks