Html 尝试控制嵌套SVG元素的缩放

我正在开发的一个应用程序使用一个简单的SVG将设置的上下限内的报告值表示为水平线上的正方形。元素然后在HTML中呈现，HTML具有固定的垂直维度，但具有自适应的水平维度。SVG目前作为单个对象进行缩放，这意味着可以将正方形挤压或拉伸成矩形，这是我想要避免的。我一直在尝试将嵌套的SVG元素与已定义的视口和视口一起使用，以便控制正方形的纵横比，但我没有运气

以下是我的最新尝试：

如果要保留纵横比a），请不要指定PreserveSpectratio=“无”因为这特别说明您不想保留纵横比b）请指定一个viewBox，因为如果没有viewBox@RobertLongson我尝试从外部元素中删除viewbox和PreserveSpectratio，并将它们设置在第一个内部元素上。这给我留下了填充div区域并自由缩放的线条，但正方形相对于原点保持固定，根本不缩放。是否可以仅使用这些属性在上面的编辑中获得行为？