使用 SVG 调整窗口大小

Question

我已经得到了当前正在渲染的 HTML：

<div style="width: 912px; height: 673px;">
    <div id="img-container" style="height: 58.82%; width: 47.07%; top: 20.59%; left: 26.46%; position: absolute;">
        <img class="grid-img" src="grid.jpg" alt="grid" style="width: 100%; height: 100%;"/>
        <div style="top: 40.55%; left: 50.13%; width: 11.7%; height: 19.33%; z-index: 13; position: absolute; transform: rotate(0deg); display: block;">
            <svg viewBox="0 0 100 100" height="100%" width="100%" id="square-0" preserveAspectRatio="none" class="annotation" name="square">
                <rect x=".5%" y=".5%" height="98.5%" width="99%" stroke="white" fill="#cc0000" stroke-width="4"/>
            </svg>
        </div>
        <div style="top: 40.34%; left: 26.72%; width: 11.96%; height: 19.75%; z-index: 14; position: absolute; transform: rotate(0deg); display: block;">
            <svg viewBox="0 0 100 100" height="100%" width="100%" id="roundedSquare-1" class="annotation" name="roundedSquare" preserveAspectRatio="none">
                <rect x=".5%" y=".5%" height="98.5%" width="99%" stroke="white" fill="#990099" stroke-width="4" rx="6"/>
            </svg>
        </div>
        <div style="top: 21.43%; left: 27.1%; width: 11.58%; height: 19.12%; z-index: 15; position: absolute; transform: rotate(0deg); display: block;">
            <svg viewBox="0 0 100 100" height="100%" width="100%" id="squareLetter-2" class="annotation" name="squareLetter" preserveAspectRatio="none">
                <rect x="1.5" y="1.5" height="97" width="97" stroke="#00ffff" stroke-width="4" fill="#ff9900"/>
                <text class="step-text" x="50" y="50" dy="26.5" dx="0.0em" text-anchor="middle" fill="white" font-size="74.96px">A</text>
            </svg>
        </div>
    </div>
</div>

呈现如下：

目标是在调整浏览器窗口大小时，我想保持图像的纵横比，以及调整 SVG 的大小以保持网格图像内的位置和形状。我尝试将img-container div 上的height 设置为auto，这样可以保持图像的比例。但是 SVG 仍然以一种对我来说没有意义的方式调整大小：

我尝试将围绕 SVG 的 div 上的 height 更改为 auto，它们看起来大小合适，但位置已关闭：

我的问题是如何实现调整窗口大小、保持图像和 SVG 的纵横比以及将 SVG 保持在网格图像上的位置的目标？

编辑： 我应该澄清，最终，网格图像可以是任何图像。我只是将它用作实现目标的模板和指南。最终，任何图像以及任何 SVG 都需要一起适当地调整大小，以便它们始终具有相同的外观。

Answer 1

我宁愿推荐一个 css grid 或 svg 布局来保持纵横比。

绝对定位是相当复杂的响应式布局。

Svg 网格布局：在一个父 svg 中包含图块/列

.resize {
  overflow: auto;
  padding: 1em;
  border: 1px solid #ccc;
  resize: both;
  width: 75vmin;
}

.svg-grid {
  width: 100%;
}

:root {
  --transX: translateX(0);
  --transY: translateY(0);
}

.col {
  transform: var(--transX) var(--transY);
}

.row-2 {
  --transY: translateY(100px);
}

.row-3 {
  --transY: translateY(200px);
}

.col-2 {
  --transX: translateX(100px);
}

.col-3 {
  --transX: translateX(200px);
}

.col-4 {
  --transX: translateX(300px);
}

<p>Resize me</p>
<div class="resize">
  <svg class="svg-grid" viewBox="0 0 400 300" overflow="visible">
    <defs>
      <pattern x="-2" y="-2" id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
        <rect width="100%" height="100%" fill="#000" />
        <rect x="0" y="0" width="100%" height="100%" fill="none" stroke="#fff" stroke-width="8" />
      </pattern>
    </defs>
    <rect class="bg" x="0" y="0" width="100%" height="100%" fill="url(#grid)" />
    <g class="col row-2 col-3">
      <rect x="0" y="0" height="100" width="100" stroke="white" fill="red" stroke-width="2" />
    </g>
    <g class="col row-2 col-1">
      <rect class="annotation" name="roundedSquare" x="0" y="0" height="100" width="100" stroke="white" fill="#990099" stroke-width="4" rx="6" />
    </g>
    <g class="annotation col row-1 col-1" name="squareLetter">
      <rect x="0" y="0" height="100" width="100" stroke="#00ffff" stroke-width="4" fill="orange" />
      <text class="step-text" x="0" y="0" dy="50" dx="50" dominant-baseline="central" text-anchor="middle" fill="white" font-size="74.96px">A</text>
    </g>
  </svg>
</div>

基于Temani Afif's answer: How can I apply multiple transform declarations to one element? 我们可以使用 css-variables 来获得一个伪 svg-grid。
所有 svg 网格元素基本上都位于 x/y=0 处，并按行和列类设置变换属性（如 transform: translateX(0) translateY(100)）移动以满足网格列/行位置。

CSS 网格方法（使用内联 svg）

.resize{
  overflow:auto;padding:1em;
  border:1px solid #ccc;
  resize:both;
  width:75vmin;

}

.gridWrp{
  aspect-ratio: 4/3;
  width:100%;
  background:#eee;
  display:grid;
  grid-template-columns: [col1] 25% [col2] 25% [col3] 25% [col4] 25%; 
  grid-template-rows: [row1] 33.333% [row2] 33.333% [row3] 33.333% ;
}



.col{
    width:100%;
}

.col-2{
  grid-column-start: col2;
  grid-column-end: col3;
}

.col-3{
  grid-column-start: col3;
  grid-column-end: col4;
}

.col-4{
  grid-column-start: col4;
  grid-column-end: 100%;
}

.row-2{
  grid-row-start: row2;
  grid-row-end:  row3;
}

.row-3{
  grid-row-start: row3;
  grid-row-end: 100%;
}

<div class="resize">
  <div class="gridWrp">
    <div class="col row-3 col-4">
      <svg class="svg-col" viewBox="0 0 100 100">
        <rect class="" x="0" y="0" height="100" width="100" fill="#cc0000" stroke-width="4" stroke="green" />
      </svg>
    </div>
    <div class="col row-1 col-2">
      <svg class="svg-col" viewBox="0 0 100 100">
        <rect class="" x="0" y="0" height="100" width="100" fill="orange" stroke-width="4" stroke="green" />
      </svg>
    </div>
    <div class="col row-2 col-3">
      <svg class="svg-col" viewBox="0 0 100 100">
        <rect class="" x="0" y="0" height="100" width="100" fill="orange" stroke-width="4" stroke="green" />
      </svg>
    </div>
    <div class="col row-2 col-1">
      <svg class="svg-col" viewBox="0 0 100 100">
        <g class="annotation col row-1 col-1" name="squareLetter">
          <rect x="0" y="0" height="100" width="100" stroke="#00ffff" stroke-width="4" fill="orange" />
          <text class="step-text" x="0" y="0" dy="50" dx="50" dominant-baseline="central" text-anchor="middle" fill="white" font-size="74.96px">A</text>
        </g>
      </svg>
    </div>
  </div>
</div>

为父网格元素定义纵横比至关重要，如下所示：

.gridWrp{
  aspect-ratio: 4/3;
}

Answer 2

您已经在矩形块中使用了 height="97" width="97"，您应该将其更新为 height="auto" min-width="97"