Style binding on SVG shapes breaks at times

[haykkh]

Vue version

3.4.26

Link to minimal reproduction

https://play.vuejs.org/#eNqVVF1v0zAU/SsXv3QTS9sNOqEsVGJoD/AACHiMxFLnNvHq2JHtpKmm/neunZAOrau0h0j3+5x7outH9qmup22DLGaJ5UbUDiy6pl4ms95dpipVicOqlplD8gCSN1EE2NXIHeYxrEQBBnPgwnCJsBWuBKsrhJVscIha0AqcrqMozBtmZGoHLRorKCkUl00uVAHaQLbSLcK76fvp1TWsDGYbC65EmKyFlLFHm0AYNQyi/lC88LlKt37MxDqjNxhDm5mzKOJaanN+M4G10VUYZt2O6LqseAnhrFHE3MJON5BJq/vZ1OiXS/rFlvb8KJPrGCwpwUtPJUDGAe9jyu7vU0Za9Pjkk7cWHUn0BPuFkeNygYJeB8r/yfw2CrGkWILMdmiej+7phum2Leh35a4kFov5nIiUKIrSjW4rcHurO/LnMAeK+S9lgRv1F4NB5vDzua+9WvhevhtNM1oHEUZCNyTEkR81RKPAL4YPdedlmw3Un2EeIEfES294GLK9RkP7kebLsGzo7s1Xth/Ae/N17UflOtGezHrd6UJbbyWz8TrZBXOWa7UWxfTBakVX/ehLU8Z1VQuJ5nvt6NpsymIIGZ/LpNTbryHmTIMX/+K8RL45En+wnY+l7IdBi6YlcmPOZaZA16fvfn3DjuwxWem8kVR9IvkTrZaN59iX3TYqJ9pP6gLbL1WtjaNL+G3vOofKPyEjUV+5D/Upo6ft84nVD3TpxEJfqvak4p/hWSIB+9tj+78ArphI

Steps to reproduce

• any version including or above 3.4.26 breaks the fill: red
• on 3.4.25: removing stroke: var(--color); from the style tag breaks thefill: red (unless you also remove some <circle>s)
• on 3.4.26: switching from :style="``" to style="" fixes fill: red
• on 3.4.26: removing some of the blue circles +- the <g> layer fixes fill: red

What is expected?

big red circle with some blue circles on top

What is actually happening?

big black circle with some blue circles on top

System Info

No response

Any additional comments?

No response

[edison1105]

The issue is caused by this commit: 09b4df8. Before version 3.4.25, :style="`xxx`" would not be stringified. In version 3.4.26, it is being stringified, but stringifyStyle returns an empty string.