SVG嵌入视频时播放控制报错与响应式尺寸失效问题求助

两类异常均由SVG语法不规范、嵌入逻辑不符合标准导致，具体问题点：

• 基础XML语法错误：原代码中<video>标签末尾多写了一个冗余尖括号>，会直接导致SVG解析失败，后续所有属性配置均无法生效。
• 属性挂载位置错误：<foreignObject>是SVG提供的外部HTML嵌入容器，本身仅支持SVG元素通用坐标属性，不支持controls这类HTML媒体元素专属属性，将controls属性加在foreignObject上会触发XML命名空间报错，中断整个SVG渲染流程。
• 容器必要属性缺失：<foreignObject>必须显式声明x/y/width/height四个属性定义自身在SVG坐标系内的绘制区域，缺省状态下容器渲染尺寸为0，此时给内部视频设置vw/em等相对单位时，会因为父容器尺寸为0直接无法显示。
• 定位逻辑错误：给video设置position: fixed会让元素完全脱离SVG坐标体系，不仅无法跟随SVG缩放做响应式适配，还会导致尺寸计算基准完全错乱，出现视频错位、溢出等问题。

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 1050 550" 
  style="enable-background:new 0 0 1050 550; width: 100%; height: auto;" 
  preserveAspectRatio="xMaxYMid meet" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:bx="https://boxy-svg.com">
  <style type="text/css">
    .background{fill:#4D4D4D;}
    .box{stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
    .embed-video {
      width: 100%;
      height: 100%;
      /* 需要视频填满区域无黑边用 cover，需要完整显示视频内容保留比例用 contain */
      object-fit: contain;
    }
  </style>
  <rect id="Background" class="background" width="1050" height="550" bx:origin="0 0">
    <title>background</title>
  </rect>
  <!-- 容器位置、尺寸和预留的白色边框框完全对齐 -->
  <foreignObject x="100" y="50" width="800" height="450">
    <video xmlns="http://www.w3.org/1999/xhtml" class="embed-video" controls>
      <source src="替换为你的视频资源地址" type="video/mp4" />
    </video>
  </foreignObject>
  <rect id="Box" class="box" width="800" height="450" y="50" style="fill: none;" x="100" bx:origin="0 0">
    <title>video frame</title>
  </rect>
</svg>

• 响应式适配不需要给内部元素单独设置vw/em单位：最外层SVG保留viewBox属性，设置width:100%; height:auto后会自动跟随父容器等比缩放；<foreignObject>尺寸严格对齐SVG内部坐标，内部视频宽高设为100%即可跟随容器同步缩放，不会出现错位、消失问题。
• 播放功能相关属性（controls、autoplay、muted、loop等）全部挂载在内部的<video>标签上即可，不要给foreignObject加任何HTML专属属性。如果需要自动播放，必须同时给video加muted属性，否则会被浏览器默认拦截。
• 资源加载注意：如果站点运行在HTTPS协议下，视频源不能使用HTTP地址，会被浏览器混合内容安全策略拦截导致加载失败；嵌入的HTML元素必须保留xmlns="http://www.w3.org/1999/xhtml"命名空间声明，否则部分浏览器会无法识别video标签。

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