Анимация SVG не работает должным образом в Safari

Я новичок в анимации SVG, я работаю над полигональной анимацией SVG, она отлично работает в Chrome и FireFox, но у меня есть некоторые проблемы с Safari (MAC) в Safari в первый раз, когда она работает нормально, но во второй раз просто показывает закрыть окно , не показывая, чтобы открыть. Сценарий заключается в том, что при нажатии на красную кнопку открывается окно, и после setTimeOut() 900 запускается функция закрытия (document.getElementById('animation-to-close').beginElement()), чтобы закрыть окно.

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 a 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 a 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 a 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 into 
  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>


svg html jquery css svg-animate
person Naveed Iqbal    schedule 08.08.2016    source источник
comment
У меня была аналогичная проблема, и оказалось, что проблема была в идентификаторах, содержащих дефисы (см. также этот вопрос). Попробуйте изменить все экземпляры animation-to-click и animation-to-close на animationToClick и animationToClose и посмотрите, не решит ли это проблему?   -  person Max Starkenburg    schedule 08.08.2016
comment
@MaxStarkenburg, я сделал то же самое, удалил дефисы со всех идентификаторов, но не повезло, проблема все та же :(   -  person Naveed Iqbal    schedule 08.08.2016