对于一个项目，我需要创建一组通过每个图像上的单个点相互连接的蒙版图像，并在滚动时随机（在限制范围内）动画该点的位置。
我已经设法让它在Chrome中运行良好，但Firefox非常多，Safari根本不喜欢这个面具，更不用说动画了。甚至不让我开始使用Edge / IE11。有什么方法吗？
HTML
<div class="c-nodes-bg c-nodes-bg--set-of-3">
<img id="nodes-bg-3i-1" width="100%" src="http://via.placeholder.com/1500x2800" style="clip-path: url("#clipPolygon");" class="moving">
<img id="nodes-bg-3i-2" width="100%" src="http://via.placeholder.com/1500x2800" style="clip-path: url("#clipPolygon2");" class="moving">
<img id="nodes-bg-3i-3" width="100%" src="http://via.placeholder.com/1500x2800" style="clip-path: url("#clipPolygon3");" class="moving">
</div>
<svg width="0" height="0" >
<clipPath id="clipPolygon" clipPathUnits="objectBoundingBox">
<polygon id="poly1" points="0.3 0.35,1 0.28,1 0, 0.6 0">
<animate id="poly1Anim" attributeName="points" dur="600ms" to="" fill="freeze" />
</polygon>
</clipPath>
<clipPath id="clipPolygon2" clipPathUnits="objectBoundingBox">
<polygon id="poly2" points="0.0 0.26, 0.3 0.35, 0.6 0.7, 0.0 0.70">
<animate id="poly2Anim" attributeName="points" dur="600ms" to="" fill="freeze" />
</polygon>
</clipPath>
<clipPath id="clipPolygon3" clipPathUnits="objectBoundingBox">
<polygon id="poly3" points="0.3 1, 1 1, 1 0.7, 0.6 0.7">
<animate id="poly3Anim" attributeName="points" dur="600ms" to="" fill="freeze" />
</polygon>
</clipPath>
</svg>
CSS
.c-nodes-bg {
position: absolute;
top: 0px;
right: 0;
left: 0;
z-index: 10;
/**
Since the background images are positioned absolute as they sit behind site content,
add in a spacer to force the height of the site to be the same as the images
*/
}
.c-nodes-bg--contact #map-canvas {
width: 100%;
height: 50vw;
}
.c-nodes-bg__spacer {
width: 100%;
height: calc(100% - 22px);
display: block;
}
.c-nodes-bg--set-of-3 img {
display: block;
width: 100%;
}
.c-nodes-bg--set-of-3 img:nth-child(2), .c-nodes-bg--set-of-3 img:nth-child(3) {
position: absolute;
top: 0;
left: 0;
}
--webkit-clip-path: url("#clipPolygon");
clip-path: url("#clipPolygon");
--webkit-clip-path: url("#clipPolygon2");
clip-path: url("#clipPolygon2");
--webkit-clip-path: url("#clipPolygon3");
clip-path: url("#clipPolygon3");
JS
var animPoints = {
init: function() {
var isScrolling;
var scrollingDone = false;
// Init backgrounds on scroll, but wait for a period of time after scroll starts before init
window.addEventListener('scroll', function ( event ) {
window.clearTimeout( isScrolling );
isScrolling = setTimeout(function() {
scrollingDone = true;
}, 300);
// Only start the animation if the previous one has finished
if(scrollingDone === true){
animPoints.randomiseBackgrounds();
scrollingDone = false;
}
}, false);
},
randomiseBackgrounds: function(){
var poly1 = document.getElementById("poly1"); // Points element within SVG
var poly1Points = poly1.getAttribute("points"); // Points attribute containing position values
var poly1PointsArr = poly1Points.split(","); // Convert points into array for ease of manipulation
var poly1PointPair1Arr = poly1PointsArr[0].split(" "); // We only need the first point's coordinates
var poly1Anim = document.getElementById("poly1Anim"); // Get the animation element within the SVG
var poly2 = document.getElementById("poly2"); // Points element within SVG
var poly2Points = poly2.getAttribute("points"); // Points attribute containing position values
var poly2PointsArr = poly2Points.split(" "); // We only need the second point's coordinates
var poly2Anim = document.getElementById("poly2Anim"); // Get the animation element within the SVG
var poly3 = document.getElementById("poly3"); // Points element within SVG
var poly3Points = poly3.getAttribute("points"); // Points attribute containing position values
var poly3PointsArr = poly3Points.split(" "); // We only need the fourth point's coordinates
var poly3Anim = document.getElementById("poly3Anim"); // Get the animation element within the SVG
// Update X axis for point 1
poly1PointPair1Arr[0] = Math.random() * (0.35 - 0.25) + 0.25;
// ..and also assign that to a point on the second poly so they are connected
poly2PointsArr[2] = poly1PointPair1Arr[0];
poly2PointsArr[4] = Math.random() * (0.63 - 0.56) + 0.56;
// ..and assign point 4 (X axis) on polygon 3 to be equal to point 3 on polygon 2 so they are connected also
poly3PointsArr[6] = poly2PointsArr[4];
// Update Y axis and also assign that to a point on the second poly so they are connected
poly1PointPair1Arr[1] = Math.random() * (0.36 - 0.32) + 0.32;
// ..and also assign that to a point on the second poly so they are connected
poly2PointsArr[3] = poly1PointPair1Arr[1];
poly2PointsArr[5] = Math.random() * (0.73 - 0.66) + 0.66;
// ..and assign point 4 (Y axis) on polygon 3 to be equal to point 3 on polygon 2 so they are connected also
poly3PointsArr[7] = poly2PointsArr[5];
// Throw the updated coordinates back into their respective attribute arrays
poly1PointsArr[0] = poly1PointPair1Arr.join();
// Convert modified array of points back to string, and update var
poly1Points = poly1PointsArr.join();
poly2Points = poly2PointsArr.join();
poly3Points = poly3PointsArr.join();
// Update the 'to' attribute with the new values
poly1Anim.setAttribute('to', poly1PointsArr);
poly2Anim.setAttribute('to', poly2Points);
poly3Anim.setAttribute('to', poly3Points);
// Play the animation!
poly1Anim.beginElement();
poly2Anim.beginElement();
poly3Anim.beginElement();
resetPoints = setTimeout(function() {
poly1.setAttribute('points', poly1PointsArr);
poly2.setAttribute('points', poly2Points);
poly3.setAttribute('points', poly3Points);
}, 600);
},
};
animPoints.init();
var scrollTimer = -1;