在浏览器中的网络摄像头预览上覆盖透明圆圈

Question

我试图在浏览器中的网络摄像头上放置一个覆盖层，其中有一个圆形透明孔。像这样的东西：- https://i.stack.imgur.com/HnDLY.png

我尝试了以下解决方案：-

• 使用 svg 掩码创建了一个 svg 图标，但是我无法使用此解决方案针对不同的浏览器大小实现响应。相关代码笔链接。

**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>

Answer 1

我终于能够使用我放置在 div 中的 svg 图标来控制 svg 图标的响应能力来解决它。Related codepen link https://codepen.io/amanadi007/pen/QWEyNbbJSconst svgIcon = () => (&nbsp; <svg&nbsp; &nbsp; &nbsp; &nbsp; width="100%"&nbsp; &nbsp; &nbsp; &nbsp; height="100%"&nbsp; &nbsp; &nbsp; &nbsp; className="svg"&nbsp; &nbsp; &nbsp; &nbsp; viewBox="0 0 260 200"&nbsp; &nbsp; &nbsp; &nbsp; version="1.1"&nbsp; &nbsp; &nbsp; &nbsp; xmlns="http://www.w3.org/2000/svg"&nbsp; &nbsp; &nbsp; &nbsp; xmlnsXlink="http://www.w3.org/1999/xlink">&nbsp; &nbsp; &nbsp; &nbsp; <defs>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <mask id="overlay-mask" x="0" y="0" width="100%" height="100%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="50%" cy="50%" r="70" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </mask>&nbsp; &nbsp; &nbsp; &nbsp; </defs>&nbsp; &nbsp; &nbsp; &nbsp; <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7"/>&nbsp; &nbsp; </svg>);const App = () => (&nbsp; <div className="webcam-container">&nbsp; &nbsp; <Webcam id="webcam" audio={false}/>&nbsp; &nbsp; <div className="overlay-container">&nbsp; &nbsp; &nbsp; {svgIcon()}&nbsp; &nbsp; &nbsp; </div>&nbsp; </div>);ReactDOM.render(&nbsp; <App />,&nbsp; document.getElementById('root'));CSS.webcam-container {&nbsp; &nbsp; position: relative;}.overlay-container {&nbsp; &nbsp; position: absolute ;&nbsp; width: 34%;&nbsp; &nbsp; top: 0 ;&nbsp; &nbsp; right: 0 ;&nbsp; &nbsp; bottom: 0 ;&nbsp; &nbsp; left: 0;}HTML<div id="root"></div>