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

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -