我有一个React应用程序，我在那里显示NFL比赛的实时更新。我试图拍摄一个足球场的图像，并根据球队已经走了多少码动态地用一个rect SVG元素覆盖它，没有覆盖的是球队还剩多少码。我所拥有的内容如下所示。

我可以动态更改矩形的大小，但是如果屏幕调整大小，矩形将移动到另一个位置，不再覆盖图像。

我怎样才能做到这一点，以便阴影总是覆盖任何百分比的图像，我想不管如何调整屏幕大小？我目前的策略是一种非常简单的方法，因为我是使用CSS的新手:

<img className = "col l5 offset-l2" src = {"./field.jpg"} alt = {this.props.team1} style = {{height:"40%",width:"40%"}}></img>
<svg width="600" height="205" style = {{"margin-left":"635px","margin-top":"-110%","margin-bottom":"1.5%"}}>
        <rect width="206" height="210" style={{"z-index":"9",position:"absolute","fill":"rgb(0,0,255)","opacity":"0.4","stroke-width":"0","stroke":"rgb(0,0,0)"}} />
</svg>

顺晟科技：

尝试此：

CSS:

<img className = "col l5 offset-l2" src = {"./field.jpg"} alt = {this.props.team1} style = {{height:"40%",width:"40%"}}></img>
<svg width="600" height="205" style = {{"margin-left":"635px","margin-top":"-110%","margin-bottom":"1.5%"}}>
        <rect width="206" height="210" style={{"z-index":"9",position:"absolute","fill":"rgb(0,0,255)","opacity":"0.4","stroke-width":"0","stroke":"rgb(0,0,0)"}} />
</svg>

HTML:

<img className = "col l5 offset-l2" src = {"./field.jpg"} alt = {this.props.team1} style = {{height:"40%",width:"40%"}}></img>
<svg width="600" height="205" style = {{"margin-left":"635px","margin-top":"-110%","margin-bottom":"1.5%"}}>
        <rect width="206" height="210" style={{"z-index":"9",position:"absolute","fill":"rgb(0,0,255)","opacity":"0.4","stroke-width":"0","stroke":"rgb(0,0,0)"}} />
</svg>