我正在研究一个svg平面布局，用户应该可以放大和缩小。

当我第一次编码它时，缩放特性起作用，但是svg不响应容器大小。我添加了viewbox属性以使其具有响应性，但这会干扰缩放功能--即使您尝试缩放，它也会缩放，并且缩放不像添加viewbox之前那样工作。

以下是两个相互依存关系来演示此问题:

没有ViewBox-SVG可以正确缩放，但不响应容器大小
https://codepen.io/nicole-dsouza/pen/wjvywk

唯一的区别在于开头的svg标记：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%">

使用ViewBox-Svg可以响应，但不能正确缩放
https://codepen.io/nicole-dsouza/pen/qrexyv

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%" viewBox="0 0 873 699">

谁能帮我弄清楚是什么引起了这个问题？我需要svg的响应和缩放在同一时间。

感谢任何帮助。