拉伸和缩放SVG元素

Question

我的<svg>中有两个元素：

• rect =浅棕色bg面板
• path =深褐色椭圆（圆圈）。

参见以下示例：

我需要拉伸 rect，以便父100%的{​​{1}}和width为height，但需要保持<div>的比例（这样圆圈的相对path就会得到维护，并且在任何情况下都不会扭曲成椭圆形。从提供的图片中你会看到这两个元素目前正在拉伸，这是不可取的。

我有一个约束，height 必须是rect而不是<svg>。

这是我的代码：

<div>

提前致谢。

更新了代码： <svg class="bg container" viewBox="0 0 1024 768" preserveAspectRatio="none" width="100%" height="100%"> <rect class="rect" width="1024" height="768"/> <path class="path" d="M511.99961-16h.0008A399.99959,399.99959,0,0,1,912,383.99959v.00083A399.99959,399.99959,0,0,1,512.00041,784h-.00083A399.99959,399.99959,0,0,1,112,384.00041v-.0008A399.99961,399.99961,0,0,1,511.99961-16Z"/> <defs> <linearGradient id="gradient" y1="384" x2="1024" y2="384" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#f8f7f2"/> <stop offset="1" stop-color="#fcfbf7"/> </linearGradient> <style> .bg.container .rect { fill: url(#gradient); } .bg.container .path { fill: #978a60; opacity: .08; } </style> </defs> </svg> 已转换为 path

circle