Z轴上的SVG滚动模糊

Question

我有一个场景，我在z轴上滚动，在父元素上翻译Z，试图复制类似于

的内容

https://codepen.io/nickpettit/full/eBCrK

我的代码转换Z轴如下，我的codepen链接如下。

class Scene {

 constructor() {
   this.scrolled = 0;
   this.distance3d = 10000;

   this.scroll = this.scroll.bind(this);
   this.transformScroll = this.transformScroll.bind(this);

   window.addEventListener('scroll', this.scroll , false);
 }

 scroll( event ) {
   this.scrolled = window.scrollY/ ( document.body.scrollHeight - window.innerHeight);
   this.transformScroll( this.scrolled );
 };

 transformScroll ( scroll ) {
   document.getElementById("content").style.transform = `translate3d(0px,0px,${this.distance3d - (scroll * this.distance3d)}px)`;
 };
}


const scene = new Scene;

https://codepen.io/ericmichael/pen/zaZRwM

我遇到的问题是我的SVG在扩展到它们的程度时会被扭曲。我很好奇是什么导致了这个/如何解决它。我试着设置shape-rendering =＆＃34; crispEdges＆＃34;在SVG本身，但这主要是在模糊的边缘上创建锯齿状边缘。