Question

我创建了一个在屋顶图像上放置和设计光伏太阳能系统的工具。为了使太阳能电池板更具逼真的吸引力，我想用radial-gradient与mix-blend-mode组合在一起来覆盖整个电池板系统，以模拟阳光在电池板上的反射。

只要我有一个完全装满的容器，我就可以轻松地覆盖整个宽度/高度的伪元素来实现效果。

但是，还有一种情况是隐藏了一些面板，从而导致拼凑而成的平面而不是均匀填充的平面。因此，它需要掩盖那些隐藏的面板，并仅在显示的面板上显示覆盖的渐变元素。

可以使用element(#id)在firefox中完成一种方法，通过mask: element(#pvsystem)创建一个alpha通道以打孔空白面板，但不幸的是仅在firefox中可用，但我还需要它在基于Webkit的浏览器中运行。

做一些研究时，我偶然发现css属性-webkit-box-reflect似乎具有element()作为底层的功能，但是它不能用作功能。

所以我想到了第三种方法：

在flexbox容器中查找元素的每个位置，并创建一个/多个svg折线，用作遮罩图像。因此，我想到使用js函数getClientRects()，但这只是给我矩形值。

还有另一种选择可以实现这一目标吗？

我的想法是

var coords = {
    left: [],
    right: [],
    top: [],
    bottom: []
},
elem;
document.querySelectorAll('.pvpanels > li:not(.bg-no-panel)').forEach(function(el) {
    elem = el.getClientRects()[0];
    if(elem) {
        coords.left.push(elem.left);
        coords.right.push(elem.right);
        coords.top.push(elem.top);
        coords.bottom.push(elem.bottom);
    }
});

从这里开始，我迷失了如何弄清所有容器以从中创建一个svg的方法。因此，我一直坚持这个想法，这就是为什么我希望将图片用作mask属性的Alpha通道。

你能帮忙吗？

如何检测元素在flexbox容器中的位置？

0 个答案: