jquery - SVG animation not properly working in Safari -
i new in svg animation, working on svg polygon animation, working fine in chrome , firefox have trouble in safari (mac) on safari first time working fine second time showing close box, not showing open. scenario when click on red button, open box , after settimeout() 900, close function(document.getelementbyid('animation-to-close').beginelement()) run close box..
resizepage(); $(".btn").on("click", function() { document.getelementbyid('animation-to-click').beginelement(); settimeout(function() { document.getelementbyid('animation-to-close').beginelement(); }, 900); }); function resizepage() { var pageheight = $(window).height() - 100; var circletopposition = pageheight / 2; $("#circle").css("top", circletopposition - 216); setcontentbox("#0d915d"); } function setcontentbox() { var getscreenwidth = $(window).width() - 165; var getscreenheight = $(window).height() - 100; var getscreenheighteachpart = $(window).width() * 2; // create svg: var svg = document.getelementsbytagname('svg')[0]; //get svg element $("#cover").css("width", getscreenwidth); $("#cover").css("height", getscreenheight); var polygonelement = document.createelementns("http://www.w3.org/2000/svg", 'polygon'); //create path in svg's namespace polygonelement.setattribute("points", "0," + getscreenheight / 2 + " 820," + getscreenheight / 2 + " 820," + getscreenheight / 2); // polygonelement.setattribute("style", "fill:#0d915d"); // create open animation var animateelement = document.createelementns("http://www.w3.org/2000/svg", 'animate'); //create path in svg's namespace animateelement.setattribute("id", "animation-to-click"); animateelement.setattribute("begin", "shape.click"); animateelement.setattribute("fill", "freeze"); animateelement.setattribute("attributename", "points"); animateelement.setattribute("dur", "550ms"); // animateelement.setattribute("class", "boxgg"); animateelement.setattribute("to", "0," + getscreenheight / 2 + " " + getscreenwidth + "," + getscreenheighteachpart + " " + getscreenwidth + ",-" + getscreenheighteachpart); // create close animation var closeboxelement = document.createelementns("http://www.w3.org/2000/svg", 'animate'); //create path in svg's namespace closeboxelement.setattribute("id", "animation-to-close"); closeboxelement.setattribute("begin", "shape.click"); closeboxelement.setattribute("fill", "freeze"); closeboxelement.setattribute("attributename", "points"); closeboxelement.setattribute("dur", "550ms"); closeboxelement.setattribute("to", "0," + getscreenheight / 2 + " 820," + getscreenheight / 2 + " 820," + getscreenheight / 2); // append animate tag polygonelement.appendchild(animateelement); polygonelement.appendchild(closeboxelement); svg.appendchild(polygonelement); }
.btn { background: red; width: 100px; height: 30px; cursor: pointer; padding: 4px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="btn"> click me </div> <svg id="cover"></svg>
Comments
Post a Comment