如何优化响应式视频遮罩SVG Logo代码，使其更简洁高效？

你当前的实现依赖固定高度和负margin来适配Logo尺寸，这种硬编码方式不够灵活，无法自适应不同屏幕。以下是更优的实现方案：

优化思路 #

1. 利用SVG的固有宽高比，通过容器的padding-bottom维持比例，替代固定高度
2. 视频采用绝对定位填充容器，保证内容自适应且不失真
3. 使用内联SVG作为遮罩，确保遮罩与容器比例完全匹配，减少外部资源依赖

优化代码 #

CSS #

.logo-container {
  position: relative;
  width: 100%;
  /* 根据Google Logo的宽高比（556:140）计算，padding-bottom = 140/556 ≈ 25.64% */
  padding-bottom: 25.64%;
  overflow: hidden;
}

.logo-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 内联SVG遮罩，与容器比例完全匹配 */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 556 140"><path d="M127.1 140V79.2h36.4l6.5-44.6h-42.9V14.9c0-4.4 1.2-7.5 7.1-7.5h36.3v-11h-43.7C97.9-1.1 81.7 0 72.2 3.6V140h54.9z" fill="%234285F4"/><path d="M278 140c37.7 0 69.7-12.8 90.2-35.3l-37-25.3c-11.6 8.3-28.2 13.6-49.2 13.6-36.8 0-67.4-24.1-76.1-56.2H143v25.7c21.2 51.1 71.5 85.3 135 85.3z" fill="%2334A853"/><path d="M196.9 32.9c-3.2-10.7-11.6-17.7-22.2-17.7-10.6 0-19 7-22.2 17.7V0h-42.9C101.2 16.9 142.8 0 196.9 0c10.8 0 20.8 4.2 28.2 11.7l22.7-22.7C232.8-1.2 215.3 0 196.9 0v32.9z" fill="%23FBBC05"/><path d="M278 58.9c22 0 40 5.3 49.2 13.6l37-25.3C347.7 12.8 315.7 0 278 0c-63.5 0-113.8 34.2-135 85.3v29.8h76.1c8.7-32.1 39.3-56.2 76.1-56.2z" fill="%23EA4335"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 556 140"><path d="M127.1 140V79.2h36.4l6.5-44.6h-42.9V14.9c0-4.4 1.2-7.5 7.1-7.5h36.3v-11h-43.7C97.9-1.1 81.7 0 72.2 3.6V140h54.9z" fill="%234285F4"/><path d="M278 140c37.7 0 69.7-12.8 90.2-35.3l-37-25.3c-11.6 8.3-28.2 13.6-49.2 13.6-36.8 0-67.4-24.1-76.1-56.2H143v25.7c21.2 51.1 71.5 85.3 135 85.3z" fill="%2334A853"/><path d="M196.9 32.9c-3.2-10.7-11.6-17.7-22.2-17.7-10.6 0-19 7-22.2 17.7V0h-42.9C101.2 16.9 142.8 0 196.9 0c10.8 0 20.8 4.2 28.2 11.7l22.7-22.7C232.8-1.2 215.3 0 196.9 0v32.9z" fill="%23FBBC05"/><path d="M278 58.9c22 0 40 5.3 49.2 13.6l37-25.3C347.7 12.8 315.7 0 278 0c-63.5 0-113.8 34.2-135 85.3v29.8h76.1c8.7-32.1 39.3-56.2 76.1-56.2z" fill="%23EA4335"/></svg>') center/contain no-repeat;
}

HTML #

<div class="logo-container">
  <video src="你的视频文件地址" autoplay loop muted></video>
</div>

优化说明 #

• 比例适配：通过padding-bottom设置容器宽高比，完全匹配SVG Logo的尺寸比例，容器会根据父元素宽度自动调整高度，无需固定值
• 视频自适应：视频采用绝对定位填充整个容器，object-fit: cover保证视频内容铺满遮罩区域且不会拉伸失真
• 遮罩匹配：内联SVG作为遮罩，避免外部资源加载问题，同时保证遮罩尺寸与容器比例完全一致，无需额外调整
• 响应式支持：容器宽度设为100%，默认适配所有屏幕尺寸，如需针对小屏调整，只需修改容器的width或padding-bottom即可

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