窗口缩放时保持SVG与图片宽高比及相对位置的实现方法

问题背景 #

现有渲染代码如下，目标是在浏览器窗口缩放时，同时满足：

• 网格图片保持原始宽高比，不拉伸变形
• 所有SVG标注维持自身形状不变，在图片上的相对位置完全固定
• 方案通用，支持任意图片+任意SVG标注的组合，缩放后视觉效果和初始状态完全一致

<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>

初始渲染效果：

已尝试的无效方案 #

之前试过两种调整方式，都无法满足需求：

1. 将img-container的height属性设为auto：图片可以保持宽高比，但SVG缩放逻辑异常
   
2. 将SVG外层包裹div的height属性设为auto：SVG自身尺寸显示正常，但在图片上的相对位置出现偏移
   

问题根因 #

两个无效方案的核心问题都是没有建立统一的缩放参考坐标系：

• 原代码给img-container写死百分比宽高，无法匹配图片的原始宽高比，首先就会导致图片拉伸
• 只改img-container高度为auto时，容器高度由图片内容撑开，但容器自身的定位百分比、内部标注的百分比尺寸参考系不统一，导致标注错位变形
• 只改SVG外层div高度为auto时，img-container本身还是被拉伸的错误比例，图片本身已经变形，标注自然无法对齐

通用实现方案 #

按照以下步骤调整即可实现全场景适配，不需要针对特定图片或标注做硬编码：

• 给图片容器绑定固定宽高比
  移除img-container上硬编码的height属性，新增aspect-ratio属性，值和图片原始宽高比完全一致。如果是动态加载的未知尺寸图片，在图片onload事件中读取naturalWidth和naturalHeight，动态设置aspect-ratio: ${naturalWidth} / ${naturalHeight}即可，保证容器永远和图片同比例，不会出现拉伸。同时设置容器内的img标签样式为width: 100%; height: 100%; display: block;，让图片完全填满容器。
• 统一标注的定位参考系
  所有SVG标注的外层包裹div，统一使用相对于img-container的百分比值设置top/left/width/height，不要混入任何固定px尺寸，保证标注的位置和大小完全按图片尺寸等比缩放。
• 调整SVG缩放规则
  移除SVG标签上的preserveAspectRatio="none"属性，改为默认值preserveAspectRatio="xMidYMid meet"，保证SVG内容在自身容器内等比缩放，不会被拉伸变形。由于外层包裹div的宽高比已经和标注区域的原始比例完全一致，SVG会刚好填满整个容器，不会出现留白。

调整后核心代码示例 #

<div style="width: 912px; height: 673px;">
    <!-- 图片容器设置和图片一致的宽高比，按实际图片比例替换即可 -->
    <div id="img-container" style="aspect-ratio: 1 / 1; 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%; display: block;"/>
        <!-- 所有标注保持百分比定位和尺寸不变 -->
        <div style="top: 40.55%; left: 50.13%; width: 11.7%; height: 19.33%; z-index: 13; position: absolute; transform: rotate(0deg); display: block;">
            <!-- 移除preserveAspectRatio="none"，保证SVG形状不拉伸 -->
            <svg viewBox="0 0 100 100" height="100%" width="100%" id="square-0" class="annotation" name="square">
                <rect x=".5%" y=".5%" height="98.5%" width="99%" stroke="white" fill="#cc0000" stroke-width="4"/>
            </svg>
        </div>
        <!-- 其余标注按相同规则调整即可 -->
    </div>
</div>

针对动态图片场景补充：只需要在图片加载完成后加一行逻辑即可自动适配任意尺寸图片：
document.getElementById('img-container').style.aspectRatio = ${img.naturalWidth}/${img.naturalHeight};
不需要提前知道图片尺寸，也不需要修改任何标注的坐标参数，即可实现任意图片+标注的同步缩放。

内容的提问来源于stack exchange，提问作者PiousVenom