Style binding on SVG shapes breaks at times - Githubissues

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

https://vuejs.org/

MIT License

47.8k stars 8.35k forks source link

Style binding on SVG shapes breaks at times #12391

Closed haykkh closed 1 week ago

haykkh commented 1 week ago

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

Screenshot 2024-11-14 at 11 54 04

What is actually happening?

big black circle with some blue circles on top

Screenshot 2024-11-14 at 11 54 15

System Info

No response

Any additional comments?

No response

edison1105 commented 1 week ago

The issue is caused by this commit: https://github.com/vuejs/core/commit/09b4df809e59ef5f4bc91acfc56dc8f82a8e243a. 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.