Vue中SVG的viewBox设为响应式属性时缩放失效的原因？

问题现象 #

• 原生写法：<svg width=300px height=75px viewbox="0 0 450 100">...</svg>，SVG能正常按viewBox设置缩放；
• 绑定Vue data属性：<svg width=300px height=75px :viewbox="viewbox">...</svg>（viewbox为data中定义的字符串'0 0 450 100'），缩放功能失效；
• 直接绑定字符串值：<svg width=300px height=75px :viewbox="'0 0 450 100'">...</svg>，缩放同样失效。

问题原因 #

SVG的viewBox属性是大小写敏感的。原生HTML中写小写的viewbox时，浏览器会自动纠正为标准的驼峰式viewBox；但Vue的属性绑定会严格按照你写的属性名渲染到DOM上，:viewbox会被渲染成<svg viewbox="...">，而SVG只识别viewBox，所以缩放逻辑不生效。

解决方案 #

把绑定的属性名改成标准的驼峰式或者短横线分隔形式（Vue会自动转换为驼峰式属性）：

方案1：使用短横线分隔的属性名 #

<svg width="300px" height="75px" :view-box="viewbox">...</svg>

方案2：直接使用驼峰式属性名 #

<svg width="300px" height="75px" :viewBox="viewbox">...</svg>

修改后，Vue会正确渲染出viewBox属性，SVG就能按照设置的参数正常缩放了。

内容的提问来源于stack exchange，提问作者Nickolas Choupik