Animated viewBox property not passed to the rendered element

[vllgth]

🐛 Bug Report

I was trying to animate the viewBox property of an SVG element. It seems that "viewBox" is converted to "view-box". I tried to use "viewbox" instead, but the property "viewbox" will be ignored by most browsers.

To Reproduce

<animated.svg viewBox={interpViewBox}>...</animated.svg>

renders to

<svg viewBox="...(initial interp. value of spring)..." view-box="...(animated values)...">...</svg>

Expected behavior

<animated.svg viewBox={interpViewBox}>...</animated.svg>

should render to

<svg viewBox="...(initial/animated values)...">...</svg>

Link to repro

CodeSandbox demo from this existing demo (Line 18 was added and line 30 was changed). By inspecting the SVG element and scrolling down a little, it should show the described behavior.

Environment

• react-spring v8.0.19
• react v16.8.6

[aleclarson]

Addressed by ee44674, will be published in v9.0.0

[aleclarson]

Hello @vllgth. Can you confirm if your bug is fixed by installing react-spring@next? Thanks.

[forgo]

I just ran into this problem on v8, and using the "next" version which installed 9.0.0-rc.3 fixed the issue I had with animating viewBox in a chain of springs.

When will the official version 9 be released?