I have this code working perfectly on windows and android in chrome, edge and FF but broken results on ipad in FF, edge, chrome and safari. Basically no animation or sign of this instance on 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>In another function I have a close state on a click event where this svg element is removed and replaced by essentially the same thing with new points and to/from in reverse. I get what appears to be a flash of garbage (mixed up/transposed points) and no animation. I only have an iPad to test on and so debugging has been tricky to say the least. I've outputted to innerHTML these attributes and all appears normal.
Don't use this in the html onclick. this javascript keyword will return the targeted element so no need to declare it in function params.
<div id="menuImg" onclick="MobiMenuOpen();">open</div>
<div id="menuCloseImg" onclick="MobiMenuClose();">close</div>
And for both elements try
var elem = document.getElementById(this.id);