附加到 Cut Out Circle Div 的圆形剪辑蒙版答案

【问题标题】：Circle Clip Mask attached to Cut Out Circle Div附加到 Cut Out Circle Div 的圆形剪辑蒙版
【发布时间】：2017-10-08 04:38:46
【问题描述】：

我希望用蓝色透明蒙版覆盖一个视频，中间有一个剪掉的圆圈。切出的圆圈将被涂成红色并且也是透明的。

我需要能够使用 javascript 轻松调整圆圈（和剪裁）的大小。

它最终会看起来像这样：

https://i.stack.imgur.com/ORVyQ.jpg

我不能使用透明的 PNG 或 SVG 并简单地调整它的大小，因为我需要能够使用 javascript 设置颜色。

最有效的方法是什么？

这是我目前所拥有的，但我认为这不是最好的方法。

https://jsfiddle.net/tbristol/j60u8pLm/

特别是，因为我正在使用第二个 SVG 元素并使用 top:-18px 对其进行调整，所以我认为它不会很好地缩放或调整大小。

svg:nth-child(2) {
  margin-top:-100%;
  position:relative;
  top:-18px;
}

【问题讨论】：

欧巴江南风格！现在你的代码在哪里？
这是我目前所拥有的，但我认为我的方向并不正确。 jsfiddle.net/tbristol/j60u8pLm
也许使用background-image: radial-gradient() 是最好的方法
有人在这里做了，但我无法让它工作：stackoverflow.com/a/8286622/3079356
从技术上讲这不是同一个问题，但看到我在这里做的类似的事情stackoverflow.com/questions/43355198/…

标签： javascript css svg mask clip-path

【解决方案1】：

我认为你想太多了。

您需要做的就是在背景顶部放置一个半透明的 SVG。不需要口罩。

var circ = document.getElementById("circ");

// Every second update the position and size of the circle
window.setInterval(function() {

  circ.setAttribute("cx", getRandomNumberMinMax(30, 70) + "%");  
  circ.setAttribute("cy", getRandomNumberMinMax(30, 70) + "%");  
  circ.setAttribute("r", getRandomNumberMinMax(20, 40) + "%");  

}, 1000);


function getRandomNumberMinMax(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

body {
  background-image: url(http://bennettfeely.com/clippy/pics/pittsburgh.jpg);
  margin: 0;
  padding: 0;
}

svg {
  position: absolute;
  height: 100%;
  width: 100%;
}

<body>

  <svg>
    <g opacity="0.5">
      <rect x="0" y="0" width="100%" height="100%" fill="blue" />
      <circle id="circ" cx="50%" cy="40%" r="30%" fill="red" />
    </g>
  </svg>

</body>

【讨论】：

这里的关键是内联 SVG 完全可以被 JavaScript 操作。太棒了。
这正是我想要做的。你。是。惊人的。谢谢你:)