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

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/QWEyNbb

JS

const svgIcon = () => (

  <svg

        width="100%"

        height="100%"

        className="svg"

        viewBox="0 0 260 200"

        version="1.1"

        xmlns="http://www.w3.org/2000/svg"

        xmlnsXlink="http://www.w3.org/1999/xlink">

        <defs>

            <mask id="overlay-mask" x="0" y="0" width="100%" height="100%">

                <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>

                <circle cx="50%" cy="50%" r="70" />

            </mask>

        </defs>

        <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7"/>

    </svg>

);

const App = () => (

  <div className="webcam-container">

    <Webcam id="webcam" audio={false}/>

    <div className="overlay-container">

      {svgIcon()}

      </div>

  </div>

);

ReactDOM.render(

  <App />,

  document.getElementById('root')

);

CSS

.webcam-container {

    position: relative;

}

.overlay-container {

    position: absolute ;

  width: 34%;

    top: 0 ;

    right: 0 ;

    bottom: 0 ;

    left: 0;

}

HTML

<div id="root"></div>