Tengo este código funcionando perfectamente en Windows y Android en Chrome, Edge y FF, pero los resultados no funcionan en iPad en FF, Edge, Chrome y Safari. Básicamente, no hay animación ni señal de esta instancia en IOS.
var height = document.documentElement.clientHeight; var width = document.documentElement.clientWidth; //DYNAMICALLY CREATE SVG POLYGON const bgSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); const bgPoly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate'); bgSvg.setAttribute('class', 'mobiNav_Poly_Close'); bgSvg.setAttribute('width', `${width}`); bgSvg.setAttribute('height', `${height}`); bgSvg.setAttribute('fill', 'white'); bgSvg.setAttribute('viewBox', `0 0 ${width} ${height}`); bgPoly.setAttribute('class', 'Poly_Close'); bgPoly.setAttribute('points', `0,${height} ${width},${height} 0,0 ${width},0`); animate.setAttribute('attributeName', 'points'); animate.setAttribute('dur', '1s'); animate.setAttribute('keyTimes', '0 ; 1'); animate.setAttribute('keySplines', '.67,.01,.16,1'); animate.setAttribute('calcMode', 'spline'); animate.setAttribute('fill', 'freeze'); animate.setAttribute('from', `${width},${height}, 0,${height}, 0,0 ${width},0`); animate.setAttribute('to', `${width},${height}, ${width},0, 0,0 ${width},0`); bgSvg.appendChild(bgPoly); bgPoly.appendChild(animate); document.querySelector('.mobiNav_overlay').appendChild(bgSvg); body { background-color: black; } .mobiNav_overlay { width: 100%; height: 100%; } <div class="mobiNav_overlay"></div>En otra función, tengo un estado cerrado en un evento de clic donde este elemento svg se elimina y se reemplaza esencialmente por lo mismo con nuevos puntos y hacia/desde al revés. Obtengo lo que parece ser un destello de basura (puntos mezclados/transpuestos) y sin animación. Solo tengo un iPad para probar, por lo que la depuración ha sido complicada, por decir lo menos. He enviado estos atributos a innerHTML y todo parece normal.
No use this en el html onclick. this palabra clave de javascript devolverá el elemento objetivo, por lo que no es necesario declararlo en los parámetros de la función.
<div id="menuImg" onclick="MobiMenuOpen();">open</div> <div id="menuCloseImg" onclick="MobiMenuClose();">close</div>Y para ambos elementos prueba
var elem = document.getElementById(this.id);