Tengo este encabezado SVG que, en el desplazamiento de la pantalla, sus partes se mueven de manera diferente. Para esto, estoy usando un script como el siguiente:

 let menu = document.getElementById('main-menu'); let lua = document.getElementById('lua'); window.addEventListener('scroll', function(){ let value = window.scrollY; menu.style.marginTop = value * 0.45 + 'px'; // working just fine lua.style.transform = "translateY(" + value * 0.25 + ")"; // don't know how to make this work

OBS: Necesito usar la transformación: traducir porque este elemento SVG, por alguna razón, no se puede mover con margen o arriba/izquierda, solo traducir.

El menu.style funciona bien, pero en el caso de lua.style tengo problemas porque no sé cómo escribir en el JS un CSS como transform: translateY que fusiona una propiedad secundaria (traducir) dentro de otra propiedad ( transformar).

He intentado escribir lua.style.transform = "translateY(" + value * 0.25 + ")"; de muchas maneras diferentes, como:

 lua.style.transform = value + "translateY(" * 0.25 + ")"; // or lua.style.translate = value * 0.45 + 'px'; // or lua.style.translate = value * 0.45; // or lua.style.translate = (0,value * 0.45);

pero todavía no puede hacer que funcione. ¿Cómo puedo escribirlo correctamente?