响应式 SVG viewBox preserveAspectRatio:"none" 和 viewBox 缩放为百分比

Question

我正在尝试使用 preserveAspectRatio:"none" 制作一个响应式 SVG viewBox，但元素没有按我预期的方式定位。

边框响应 viewBox 的纵横比，但元素的定位就像 viewBox 纵横比始终为 1 一样。

我希望这些元素位于 viewBox 的角落：

    .container {
    position: relative;
    top:0;
    left:0;
    display:flex;
    justify-items:center;
    align-items:top;    

    height: 50vh;
    width: 100%;
    max-width: 180vh;

    border-style:dotted;
    border-color:gold;
  
    }
    #svgOuter {
      border: 10px dashed #d9d9d9;
      width: 100%;
      height: 100%;
    }

<div class="container">
    <svg id="svgOuter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" preserveAspectRatio:"none">
     
        <rect id="rect1" fill="silver" height="20" width="20" transform="translate(100 100)" />
        <rect id="rect2" fill="silver" height="20" width="20"  transform="translate(900 100)" />
        <rect id="rect3" fill="silver" height="20" width="20"  transform="translate(100 900)" />
        <rect id="rect4" fill="silver" height="20" width="20"  transform="translate(900 900)" />
    
        <rect id="rect11" fill="gold" height="15" width="15" x="100" y="100"/>
        <rect id="rect12" fill="gold" height="15" width="15" x="900" y="100"/>
        <rect id="rect13" fill="gold" height="15" width="15" x="100" y="900"/>
        <rect id="rect14" fill="gold" height="15" width="15" x="900" y="900"/>
    
        <rect id="rect21" fill="cadetblue" height="10" width="10" x="10%" y="10%"/>
        <rect id="rect22" fill="cadetblue" height="10" width="10" x="90%" y="10%"/>
        <rect id="rect23" fill="cadetblue" height="10" width="10" x="10%" y="90%"/>
        <rect id="rect24" fill="cadetblue" height="10" width="10" x="90%" y="90%"/>
    </div>

我尝试过绝对单位、百分比和转换翻译。我还尝试将这些样式与 CSS 一起应用。

此外，Ctrl-k 不会在 Firefox 中为我格式化代码。 Ctrl-k 切换单引号，它不缩进 4 个空格。