HTML/CSS实现SVG矩形动态覆盖图片 React NFL赛场进度适配问题

你的问题根源是用了固定像素的边距、SVG尺寸和绝对定位规则，屏幕尺寸变化时图片的位置、大小都会动态改变，和固定参数的SVG无法对齐，按以下方案修改即可实现自适应：

核心思路 #

把图片和SVG放到同一个相对定位的父容器中，让SVG尺寸完全跟随父容器（也就是和图片尺寸完全同步），遮罩矩形用百分比单位控制尺寸，就可以保证任何尺寸下比例都正确。

完整代码实现 #

// 外层容器的栅格类可以保留，对应你原来的图片布局规则
<div style={{
  position: 'relative',
  width: '40%'
}} className="col l5 offset-l2">
  {/* 球场图片 */}
  <img 
    src={"./field.jpg"} 
    alt={this.props.team1} 
    style={{
      width: '100%',
      height: 'auto',
      display: 'block'
    }}
  />
  {/* 遮罩SVG */}
  <svg 
    width="100%" 
    height="100%" 
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      zIndex: 9
    }}
  >
    {/* width属性值就是你要覆盖的百分比，比如推进了35码就写35%，动态改这个值就行 */}
    <rect 
      width="35%" 
      height="100%" 
      style={{
        fill: "rgb(0,0,255)",
        opacity: "0.4",
        strokeWidth: 0,
        stroke: "rgb(0,0,0)"
      }} 
    />
  </svg>
</div>

改动说明 #

• 移除了所有固定像素的margin、SVG宽高参数，不再用负margin强行对齐两个独立元素
• 父容器设置position: relative，作为内部绝对定位元素的定位基准
• SVG设置为绝对定位，完全覆盖在图片上，尺寸和图片100%同步
• 矩形的宽高用百分比单位，只需要根据推进码数换算成对应百分比修改width属性即可，不需要调整其他参数，任何屏幕尺寸下覆盖比例都不会偏移

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