SVG动画在Safari

Question

我是SVG动画的新手，我正在研究SVG多边形动画，它在Chrome和FireFox中运行良好但在Safari（MAC）中遇到了一些麻烦 在Safari第一次它工作正常，但第二次它只是显示关闭框，而不显示打开。 场景是点击红色按钮，打开框，在setTimeOut（）900之后，关闭函数（document.getElementById（＆＃39; animation-to-close＆＃39;。）。beginElement（））运行关闭盒子..

＆＃13;

＆＃13;

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);
}

＆＃13;

.btn {
  background: Red;
  width: 100px;
  height: 30px;
  cursor: pointer;
  padding: 4px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;