附加到 Cut Out Circle 的 Circle Clip Mask Div
Circle Clip Mask attached to Cut Out Circle Div
我想用蓝色透明蒙版叠加视频,中间有一个切出的圆圈。切出的圆圈是红色的,也是透明的。
我需要能够使用 javascript 轻松调整圆(和切出的部分)的大小。
它最终看起来像这样:
https://i.stack.imgur.com/ORVyQ.jpg
我不能使用透明的 PNG 或 SVG 并简单地调整它的大小,因为我需要能够使用 javascript 设置颜色。
最有效的方法是什么?
这是我目前的方法,但我认为这不是最好的方法。
https://jsfiddle.net/tbristol/j60u8pLm/
特别是,因为我正在使用第二个 SVG 元素并将其调整为顶部:-18 像素,所以我认为它不会很好地缩放或调整大小。
svg:nth-child(2) {
margin-top:-100%;
position:relative;
top:-18px;
}
我认为你想多了。
您需要做的就是在背景上方放置一个半透明的 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>
我想用蓝色透明蒙版叠加视频,中间有一个切出的圆圈。切出的圆圈是红色的,也是透明的。
我需要能够使用 javascript 轻松调整圆(和切出的部分)的大小。
它最终看起来像这样:
https://i.stack.imgur.com/ORVyQ.jpg
我不能使用透明的 PNG 或 SVG 并简单地调整它的大小,因为我需要能够使用 javascript 设置颜色。
最有效的方法是什么?
这是我目前的方法,但我认为这不是最好的方法。
https://jsfiddle.net/tbristol/j60u8pLm/
特别是,因为我正在使用第二个 SVG 元素并将其调整为顶部:-18 像素,所以我认为它不会很好地缩放或调整大小。
svg:nth-child(2) {
margin-top:-100%;
position:relative;
top:-18px;
}
我认为你想多了。
您需要做的就是在背景上方放置一个半透明的 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>