如何实现SVG宽高响应式适配父容器div尺寸

SVG无法随父容器拉伸的核心原因是viewBox属性配置非法：
viewBox的合法值格式为min-x min-y 画布宽度 画布高度，四个值必须为无单位数值，不支持百分比。你当前代码中写的viewBox="0 0 100% 100%"无法被浏览器正确解析，浏览器无法建立SVG内部坐标和外部容器尺寸的映射关系，自然无法实现响应式缩放。
根据SVG内部的路径代码计算，该图形的实际画布尺寸为宽333、高62，和初始父容器62px的高度完全对应。

• 把SVG开标签上错误的viewBox值替换为匹配实际画布尺寸的固定值
• 新增preserveAspectRatio="none"属性，配置SVG不强制保持原始宽高比，允许拉伸铺满父容器。如果需要保持图形比例避免变形，可以省略该属性，SVG会按原始比例在容器内自动适配。

将原SVG开标签：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">

替换为：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 333 62" preserveAspectRatio="none">

修复后点击展开按钮将父div宽度调整为600px时，SVG会自动撑满整个容器，不会出现尺寸不匹配的问题。

内容的提问来源于stack exchange，提问作者Feroz Siddiqui