我有一个项目，我想通过镜头在整个站点上实现玻璃效果。我尝试过使用PixiJS，但它仅适用于画布。过滤器必须位于网站上的每个元素上，这一点很重要。我已经成功地通过CSS在身体上放置了SVG位移滤镜，并且它扭曲了（！），但是身体和站点上的所有内容也只能通过图像看到，我用来进行位移。
是否可以使用SVG滤光片来实现在现场运行的玻璃镜片，还是有另一种更好的方式？
这是我到目前为止的代码
我没有完全自己写js。我在这里
供参考，这是我所追求的效果，但是没有画布https://codepen.io/osublake/pen/WQyBJb
我将如何制作SVG feImage动画？我尝试使用setattribute x和y，但是它不会移动
谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Glass Displacement</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.5/pixi.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg>
<defs>
<filter id="displace-filter">
<feImage id="displaceImg" x="512" y="512" width="100%" height="100%" result="displaceImage" />
<feDisplacementMap id="displacement-map"
xChannelSelector="R"
yChannelSelector="G"
in="SourceGraphic"
in2="displaceImage"
color-interpolation-filters="sRGB"
scale="100"
result="displacementMap"
/>
<feComposite in2="displaceImage" operator="in" />
</filter>
</defs>
</svg>
<div class="wrapper">
<img src="https://source.unsplash.com/X0Tavx1j8Wc" alt="">
<h1>Bornholm</h1>
</div>
<div id="glass"></div>
<script src="svgdisplace.js"></script>
</body>
</html>
*,*::before,*::after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
@font-face {
font-family: system;
font-style: normal;
font-weight: 400;
src: local(".SFNSText-Light"),local(".HelveticaNeueDeskinterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma");
}
html,body {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: "system";
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
filter: url("#displace-filter");
}
html {
font-size: 16px;
}
h1 {
margin-top: 0;
font-size: 11.089em;
font-weight: 100;
}
.wrapper {
position: relative;
width: 75vw;
height: 75vh;
overflow: hidden;
}
.wrapper img {
width: 100%;
position: relative;
bottom: 50%;
}
#glass {
background: chartreuse;
width: 200px;
height: 200px;
position: absolute;
/* filter: url(#noise); */
}
svg {
position: absolute;
top: 500px;
left: 500px;
transform: translate(-50%,-50%);
}
.wrapper h1 {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
var xlink = "http://www.w3.org/1999/xlink";
var imgUrl = "_assets/displace2.png";
var feImage = document.querySelector("feImage");
var displaceImg = document.getElementById("displaceImg");
var speed = {
x: 2,y: 1
};
toBase64(imgUrl,function(data){
feImage.setattributeNS(xlink,"xlink:href",data);
});
function toBase64(url,callback){
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function(){
var canvas = document.createElement("canvas");
var ctx = canvas.getcontext("2d");
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this,0);
var dataURL = canvas.toDataURL("image/png");
callback(dataURL);
canvas = null;
};
img.src = url;
}
animate();
var tx = 0;
var ty = 0;
function animate(){
tx += 0.027;
ty += 0.031;
displaceImg.setattribute("x",speed.x);
displaceImg.setattribute("y",speed.y);
speed.x += 0.1;
speed.y += 0.1;
renderer.render(stage); */
requestAnimationFrame(animate);
}
这是图片，我正用来替换
https://zumi.gucci.com/