我从这里使用这个效果：https://tympanus.net/codrops/2019/03/12/image-distortion-effects-with-svg-filters/
https://codepen.io/furkanyildiz/pen/bGwebmR
<div style="height:5rem;">
this div disrupts the render location of images </div>
<main>
<div class="content">
<svg class="distort" width="350" height="450" viewBox="0 0 350 450">
<filter id="distortionFilter">
<feTurbulence type="turbulence" baseFrequency="0.07 0.01" numOctaves="5" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse" />
</filter>
<g filter="url(#distortionFilter)">
<image class="distort__img" x="50" y="50" xlink:href="img/1.jpg" height="350" width="250" />
<image class="distort__img" x="50" y="50" xlink:href="img/2.jpg" height="350" width="250" />
<image class="distort__img" x="50" y="50" xlink:href="img/3.jpg" height="350" width="250" />
<image class="distort__img" x="50" y="50" xlink:href="img/4.jpg" height="350" width="250" />
</g>
</svg>
<nav class="menu">
<a href="#" class="menu__link">Shanghai</a>
<a href="#" class="menu__link">Taipei</a>
<a href="#" class="menu__link">Bangkok</a>
<a href="#" class="menu__link">Kyoto</a>
</nav>
</div>
</main>
我想要实现的是：
无论页面大小如何，当悬停在菜单项上时，我都希望图像出现在鼠标指针的中间，图片显示的坐标会根据js代码中的页面大小进行调整。
我只是想让它根据.content类本身进行调整。随着页面大小的减小，图片的方向也会发生变化。请帮忙。
我找到了解决方案：我试图运行的效果是使用pageY和pageX只读属性。当我在使用这种效果的同时向页面添加另一个元素时，页面高度当然会发生变化"页面Y"；值也在变化。
pageY，它检测相对于窗口的位置，用以下代码pageY检测相对于包含分区的位置。
this.targetY = pageY - document.querySelector('.myDiv').offsetTop - document.querySelector('html').scrollTop;
我们简单地从pageY值中提取offsetTop和滚动像素计数。
我从下面的答案中找到了解决方案