如何仅拉伸SVG中间区域（保留上下部分尺寸）实现纯SVG响应式聊天气泡

核心逻辑是拆分气泡为顶部固定造型区、中间可拉伸内容区、底部固定造型区，仅让中间黑色区域随容器高度缩放，其余装饰部分保持原有比例不变形。

最终可直接使用的SVG代码 #

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 193 100" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<!-- 右上角白色装饰 固定高度 -->
<g id="#ffffffff">
<path fill="#ffffff" opacity="1.00" d=" M 186.39 0.00 L 193.00 0.00 L 193.00 5.57 C 191.69 2.83 189.20 1.00 186.39 0.00 Z" />
<path fill="#ffffff" opacity="1.00" d=" M 186.04 100 C 188.92 98.62 191.42 96.08 193.00 92.72 L 193.00 100 L 186.04 100 Z" />
</g>
<!-- 绿色边框 上下固定高度 -->
<g id="#339933ff">
<path fill="#339933" opacity="1.00" d=" M 5.66 0.00 L 186.39 0.00 C 189.20 1.00 191.69 2.83 193.00 5.57 L 193.00 7.03 C 139.67 6.97 86.33 7.01 33.00 7.00 C 28.05 6.92 23.02 7.43 18.13 6.41 C 12.54 3.77 6.35 3.06 0.48 1.30 C 2.20 0.85 3.93 0.41 5.66 0.00 Z" />
<path fill="#339933" opacity="1.00" d=" M 18.02 92.75 C 76.34 92.73 134.67 92.74 193.00 92.72 L 193.00 92.72 C 191.42 96.08 188.92 98.62 186.04 100 L 24.52 100 C 21.40 98.45 18.43 95.59 18.02 92.75 Z" />
</g>
<!-- 黑色中间区域 可自动拉伸 -->
<g id="#000000ff">
<path fill="#000000" opacity="1.00" d=" M 18.13 7.03 C 23.02 7.43 28.05 6.92 33.00 7.00 C 86.33 7.01 139.67 6.97 193.00 7.03 L 193.00 92.72 C 134.67 92.74 76.34 92.73 18.02 92.75 C 17.98 64.50 18.05 36.27 18.13 7.03 Z" />
</g>
</svg>

使用说明 #

• 无需额外CSS配置，直接将上述SVG代码放入任意div容器中即可
• 父容器设置任意宽高值，SVG会自动填充满容器，左侧尖角、上下绿色边框、右侧圆角均保持原有造型不变，仅中间黑色区域随容器高度自动拉伸
• 可直接修改各path的fill属性值自定义气泡配色，修改左侧尖角坐标即可调整尖角位置、大小

内容的提问来源于stack exchange，提问作者dani 'SO learn value newbies'