如何用SVG线条连接标题关键词与图片区域并适配Viewports>992px的CSS定位

核心思路：统一容器比例+百分比定位+SVG viewBox缩放 #

要在Viewports>992px的视口中保持文本关键词与图片区域的比例匹配，关键是让所有元素（标题关键词、图片、SVG线条）都基于同一个固定比例的容器定位，具体步骤如下：

• 用固定比例容器包裹所有元素
  给标题、图片、SVG套一个父容器，通过aspect-ratio（现代浏览器）或padding-top（兼容老浏览器）固定宽高比，确保大屏下整体布局比例不变。比如图片是16:9，就给容器设置aspect-ratio: 16/9，这样容器会根据宽度自动匹配高度，所有内部元素的相对位置不会变形。

• 关键词与图片锚点用百分比定位
  标题中的每个关键词设置为相对定位，用top/left百分比值确定位置；图片里的目标区域，也可以用透明的绝对定位空元素标记，同样用百分比设置坐标。这样不管容器怎么缩放，元素的相对位置始终保持一致。

• SVG用viewBox实现响应式线条
  SVG的viewBox属性设置为容器的基准宽高（比如viewBox="0 0 1920 1080"对应16:9），然后用<line>或<path>连接关键词和图片锚点的坐标（支持直接用百分比单位）。把SVG设为容器的绝对覆盖层，它会跟着容器同步缩放，线条位置始终精准对应。

代码示例 #

<div class="connection-wrap">
  <h1 class="title">
    标题中的<span class="kw kw-1">关键词1</span>
    <span class="kw kw-2">关键词2</span>
    <span class="kw kw-3">关键词3</span>
  </h1>
  <img src="your-image.jpg" alt="目标图片" class="target-img">
  <!-- 连接线条SVG -->
  <svg class="link-svg" viewBox="0 0 1920 1080">
    <line x1="22%" y1="8%" x2="48%" y2="62%" stroke="#2563eb" stroke-width="2"/>
    <line x1="51%" y1="8%" x2="66%" y2="72%" stroke="#2563eb" stroke-width="2"/>
    <line x1="78%" y1="8%" x2="82%" y2="52%" stroke="#2563eb" stroke-width="2"/>
  </svg>
</div>

对应的CSS（仅大屏生效）：

@media (min-width: 992px) {
  .connection-wrap {
    position: relative;
    width: 100%;
    max-width: 1920px; /* 可选：限制最大宽度避免过度拉伸 */
    aspect-ratio: 16/9;
    margin: 0 auto;
  }

  .title {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    margin: 0;
  }

  .kw {
    position: relative;
    /* 可根据需求用百分比微调单个关键词位置 */
  }

  .target-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .link-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 避免SVG遮挡下方元素的交互 */
  }
}

补充注意事项 #

• 若需要更精准的锚点，可给图片目标区域添加透明的绝对定位元素，通过JS获取其坐标动态生成SVG线条；静态场景下直接用百分比坐标足够。
• 老浏览器不支持aspect-ratio时，可改用伪元素实现比例：.connection-wrap::before { content: ''; display: block; padding-top: 56.25%; }，再将内部元素设为绝对定位。

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