缩放SVG上的元素定位问题：保持相对位置固定

相信你也发现了，当把SVG设为全屏显示时，浏览器为了维持它的原始宽高比，会自动在两侧或上下添加“隐形”的内边距——这些内边距不属于CSS样式，没法直接获取，导致你按SVG尺寸百分比定位的元素总是跑偏。下面给你分享两个靠谱的解决方案：

方案一：用CSS媒体匹配宽高比（我个人更推荐这个） #

核心思路是先算出SVG的原始宽高比，然后给SVG套个容器，通过媒体查询让容器始终保持这个比例，这样SVG能完全填满容器，你再基于容器做百分比定位就准了。

具体步骤： #

1. 计算宽高比：比如你的SVG是544×400，那宽高比就是544/400=1.36，换算成分数就是136/100；反过来高宽比是400/544≈0.735，近似74/100。如果是1:1的SVG就更简单了。
2. 编写代码：
   先给SVG和定位元素添加一个容器：

   <div class="svg-wrap">
     <img src='data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aCBkPSJNNjUsMjBhMTUsMTUsMCwxLDEsMTUsMTVoLTYwYTE1LDE1LDAsMSwxLDE1LTE1djYwYTE1LDE1LDAsMSwxLTE1LTE1aDYwYTE1LDE1LDAsMSwxLTE1LDE1eiIgc3Ryb2tlPSIjRDcwIiBzdHJva2Utd2lkdGg9IjgiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==' id='svg'>
     <div class="marker">#</div>
   </div>
   

   然后编写对应的CSS：

   body { 
     overflow: hidden; 
     margin: 0; /* 去掉body默认边距避免干扰 */
   }
   .svg-wrap {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%); /* 让容器居中显示 */
     /* 默认尺寸设置，后续媒体查询会根据窗口比例覆盖 */
     width: 100vw;
     height: 100vh;
   }
   #svg {
     width: 100%;
     height: 100%;
     display: block; /* 去掉图片默认的行内间距 */
   }
   .marker {
     position: absolute;
     left: 31%; /* 对应SVG左侧31%的位置 */
     top: 8%; /* 对应SVG顶部8%的位置 */
     color: #000;
     font-size: 50px;
   }
   
   /* 根据SVG的宽高比编写媒体查询 */
   @media (min-aspect-ratio: 136/100) {
     /* 窗口宽高比大于SVG，容器高度占满窗口，宽度按比例计算 */
     .svg-wrap {
       width: 136vh;
       height: 100vh;
     }
   }
   @media (max-aspect-ratio: 136/100) {
     /* 窗口宽高比小于SVG，容器宽度占满窗口，高度按比例计算 */
     .svg-wrap {
       width: 100vw;
       height: 74vw;
     }
   }
   

   这样不管窗口怎么调整，容器始终和SVG保持相同比例，你的定位元素就会牢牢贴在SVG的目标位置上。

方案二：用JS动态计算位置 #

如果不想折腾CSS媒体查询，也可以用JS实时获取SVG的实际渲染位置，然后调整元素坐标：

function fixMarkerPosition() {
  const svg = document.getElementById('svg');
  const marker = document.querySelector('.marker');
  // 可以提前知道SVG的原始尺寸，也可以从svg元素的width/height属性获取
  const svgOriginalWidth = 100;
  const svgOriginalHeight = 100;

  // 获取SVG实际渲染的位置和尺寸信息
  const svgRenderRect = svg.getBoundingClientRect();
  
  // 目标位置的百分比参数
  const targetLeftPercent = 31;
  const targetTopPercent = 8;

  // 计算元素应该在的绝对位置
  const leftPos = svgRenderRect.left + (svgRenderRect.width * targetLeftPercent / 100);
  const topPos = svgRenderRect.top + (svgRenderRect.height * targetTopPercent / 100);

  // 更新元素的定位样式
  marker.style.left = `${leftPos}px`;
  marker.style.top = `${topPos}px`;
}

// 页面加载完成和窗口尺寸变化时，都要重新计算位置
window.addEventListener('load', fixMarkerPosition);
window.addEventListener('resize', fixMarkerPosition);

这个方法需要你知晓SVG的原始尺寸，或者能从SVG元素的属性中读取到，然后每次窗口变化都重新计算位置，也能解决偏移问题。

小提示 #

优先选用第一个CSS方案，不需要编写JS监听事件，性能更好，代码也更简洁。计算宽高比的时候尽量精确，或者取个近似值，不会影响实际定位效果~

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