Проблемы с анимированным PNG внутри SVG ⇐ Javascript

[Anonymous]

Я увидел этот урок, который учит, как делать сложные многослойные свитки параллаксов и реализовать на моем веб -сайте. В то время как прототипирование я нашел несколько странных линий, которые появились бы при манипулировании PNG (я знаю, что размер файла большой, я исправлю его позже). Я думал, что это могут быть просто некоторые белые пиксели, которые просто нужно было очистить, но после очистки всех краев проблема сохранялась. Есть идеи, почему браузеры с этой проблемой рендеринга? из PNG, которые находятся внутри SVG. < /p>
html: < /p>





< /code>
css: < /p>
body {
margin: 0;
background-color: #000000;
}

#mountain {
width: 100%;
height: 100vh;
overflow: hidden;
}

#mountain svg {
width: 100%;
height: 100%;
object-position: center;
}
< /code>
js: < /p>
function loadSVG() {
fetch("https://raw.githubusercontent.com/astro ... scroll.svg")
.then(res => res.text())
.then(svg => {
const mountain = document.getElementById("mountain");
mountain.innerHTML = svg;

const svgEl = mountain.querySelector("svg");
svgEl.setAttribute("preserveAspectRatio", "xMidYMid slice");

createWrapper("#layer_1");
createWrapper("#layer_2");

setAnimationScroll();
setCloudAnimation();

});
}

function createWrapper(layerId) {
const layer = document.querySelector(`#mountain svg ${layerId}`);
if (!layer) return;

const wrapper = document.createElementNS("http://www.w3.org/2000/svg", "g");
wrapper.setAttribute("id", `${layerId.slice(1)}_wrapper`);

layer.parentNode.insertBefore(wrapper, layer);
wrapper.appendChild(layer);
}

loadSVG();

function setAnimationScroll() {
gsap.registerPlugin(ScrollTrigger);

let runAnimation = gsap.timeline({
scrollTrigger: {
trigger: ".banner",
start: "top top",
end: "+=1000",
scrub: true,
pin: true
}
});

runAnimation.add([
gsap.to("#cloud10_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud9_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud8_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud7_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud6_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud5_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud4_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud3_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud2_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud1_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud2b", { y: -1500, duration: 2 }),
gsap.to("#cloud1b", { y: -1500, duration: 2 }),
gsap.to("#cloud10", { y: -1500, duration: 2 }),
gsap.to("#cloud9", { y: -1500, duration: 2 }),
gsap.to("#cloud8", { y: -1500, duration: 2 }),
gsap.to("#cloud7", { y: -1500, duration: 2 }),
gsap.to("#cloud6", { y: -1500, duration: 2 }),
gsap.to("#cloud5", { y: -1500, duration: 2 }),
gsap.to("#cloud4", { y: -1500, duration: 2 }),
gsap.to("#cloud3", { y: -1500, duration: 2 }),
gsap.to("#cloud2", { y: -1500, duration: 2 }),
gsap.to("#cloud1", { y: -1500, duration: 2 })
])
.add([
gsap.to("#layer_1", {
scale: 1.4,
x: -250,
y: 0,
transformOrigin: "50% 0%",
duration: 2
}),
gsap.to("#layer_2", {
scale: 1.2,
transformOrigin: "50% 0%",
duration: 2
})
]);
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... side-a-svg