如何实现带SVG显示器轮廓的video组件自适应缩放？

嘿，这个问题我之前帮不少开发者踩过坑——用绝对定位搞定静态布局没问题，但SVG一缩放就失效，核心原因是你把video放在SVG外部，两者的坐标系统完全不联动。下面给你两种靠谱的自适应方案，按需选择就行：

这是SVG官方提供的嵌入HTML元素的方式，能让video完全融入SVG的坐标系统，跟着SVG一起自适应缩放，是最省心的方案。

操作步骤： #

1. 先确定SVG里显示器屏幕区域的精确坐标（x/y）和尺寸（width/height），比如你的屏幕轮廓是<rect x="20" y="20" width="360" height="270" />，就用这组数值。
2. 给SVG添加viewBox属性，定义整个SVG的坐标范围（比如整个SVG宽400、高310，就写viewBox="0 0 400 310"），这是SVG能自适应缩放的核心。
3. 用<foreignObject>标签把video包裹起来，它的x/y/width/height要和屏幕区域完全匹配，然后在内部嵌入video，设置width:100%; height:100%;让它填满区域。

代码示例： #

<svg viewBox="0 0 400 310" style="width:100%; height:auto; max-width:800px;">
  <!-- 显示器外框 -->
  <rect x="10" y="10" width="380" height="290" rx="15" fill="#ddd" stroke="#333" stroke-width="2"/>
  <!-- 屏幕背景（video加载前显示） -->
  <rect x="20" y="20" width="360" height="270" fill="#000"/>
  <!-- 嵌入video的核心标签 -->
  <foreignObject x="20" y="20" width="360" height="270">
    <!-- 必须添加xhtml命名空间，否则部分浏览器不识别 -->
    <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
      <video controls style="width:100%; height:100%; object-fit:cover;">
        <source src="your-video.mp4" type="video/mp4">
      </video>
    </div>
  </foreignObject>
</svg>

关键点说明： #

• viewBox：让SVG能按原始比例自适应容器大小，不管容器怎么变，内部元素的相对位置和尺寸都不会乱。
• object-fit:cover：确保video不会因为屏幕比例和自身比例不一致而拉伸变形，和图片的object-fit效果一样。
• 命名空间：<div>必须加上xmlns="http://www.w3.org/1999/xhtml"，否则Firefox等浏览器可能无法正确渲染内部的HTML元素。

如果需要兼容对<foreignObject>支持不好的旧浏览器（比如IE11），可以用相对定位容器+百分比定位的方式，让video的位置和尺寸跟着SVG的比例走。

操作步骤： #

1. 把SVG和video放在同一个position:relative的容器里，容器的尺寸由SVG决定（SVG设width:100%）。
2. 计算屏幕区域在整个SVG中的百分比：比如SVG宽400，屏幕x=20，那么left就是(20/400)*100% = 5%；屏幕宽360，width就是(360/400)*100% = 90%，以此类推计算top和height的百分比。
3. 给video设置position:absolute，用计算好的百分比值定位，确保它和SVG的屏幕区域完全重合。

代码示例： #

<div style="position:relative; width:100%; max-width:800px;">
  <svg viewBox="0 0 400 310" style="width:100%; height:auto; display:block;">
    <!-- 显示器外框 -->
    <rect x="10" y="10" width="380" height="290" rx="15" fill="#ddd" stroke="#333" stroke-width="2"/>
    <rect x="20" y="20" width="360" height="270" fill="#000"/>
  </svg>
  <!-- 用百分比定位的video -->
  <video controls style="position:absolute; top:6.45%; left:5%; width:90%; height:87.1%; object-fit:cover;">
    <source src="your-video.mp4" type="video/mp4">
  </video>
</div>

关键点说明： #

• display:block：给SVG加上这个属性，避免容器底部出现不必要的留白。
• 百分比计算：一定要基于整个SVG的宽高来算，这样容器缩放时，video的位置和尺寸会自动跟着SVG的比例调整。
• 兼容性：这个方案能兼容几乎所有现代浏览器和IE11，适合对兼容性要求高的场景。

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