我試圖在瀏覽器中的網(wǎng)絡(luò)攝像頭上放置一個(gè)覆蓋層，其中有一個(gè)圓形透明孔。像這樣的東西：- https://i.stack.imgur.com/HnDLY.png我嘗試了以下解決方案：-使用 svg 掩碼創(chuàng)建了一個(gè) svg 圖標(biāo)，但是我無(wú)法使用此解決方案針對(duì)不同的瀏覽器大小實(shí)現(xiàn)響應(yīng)。相關(guān)代碼筆鏈接。**JS**    const svgIcon = () => (    <svg className="svg" viewbox="0 0 100 100" width="100%" height="100%">        <defs>           <mask id="mask" x="0" y="0" width="3000" height="3000">              <rect x="0" y="0" width="3000" height="3000" fill="#fff"/>              <circle cx="250" cy="200" r="110" />           </mask>        </defs>        <rect x="0" y="0" width="3000" height="3000" mask="url(#mask)" fill-opacity="0.9"/>          </svg>    );            const App = () => (    <div className="app">       <Webcam id="webcam" audio={false}/>       {svgIcon()}    </div>    );           ReactDOM.render(       <App />,       document.getElementById('root')   );**CSS**.app {  position: relative;  float: left;}.svg {  position: absolute;  left: 0px}#webcam {  width:500px;  height:400px;}#mask {  position: absolute;}**HTML**<div id="root"></div>