IE 中的 SVG 旋转（全部）失败

Question

我有一个需要旋转元素的 SVG 动画。基于 SMIL 和 css 的动画是不可能的，因为 IE 不支持它们，并且 IE 或 Firefox 也不支持 beginElement() 属性。 IE 大小不是问题，因为 CSS 很好地解决了这个问题。

问题在于它不是标准形状（矩形、圆形等），因此 svg 动画属性以惊人的方式失败，因为默认情况下没有中心点 - getBBox() 是首选方法。

我有一个plunk，其中包含 html 中的 svg 示例。为了便于移植，脚本必须在 svg 中，我已经让它在 Chrome、Firefox 和 Opera 中工作，但 IE 无法旋转元素，尽管没有显示错误。 JS如下：

var svgNS = "http://www.w3.org/2000/svg";

function init(evt) {
  addRotateTransform('spinner', 1.5, 1);
}

function addRotateTransform(target_id, dur, dir) {
  var my_element = document.getElementById(target_id);
  var a = document.createElementNS(svgNS, "animateTransform");

  var bb = my_element.getBBox();
  var cx = bb.x + bb.width/2;
  var cy = bb.y + bb.height/2;

  a.setAttributeNS(null, "attributeName", "transform");
  a.setAttributeNS(null, "attributeType", "XML");
  a.setAttributeNS(null, "type", "rotate");
  a.setAttributeNS(null, "dur", dur + "s");
  a.setAttributeNS(null, "repeatCount", "indefinite");
  a.setAttributeNS(null, "from", "0 "+cx+" "+cy);
  a.setAttributeNS(null, "to", 360*dir+" "+cx+" "+cy);

  my_element.appendChild(a);
  try {
    a.beginElement(); // this works in Chrome
  }
  catch(err) {
    window.setTimeout(init, 0); // this works in FF
  }
}

Answer 1

这是一个使用 javascript 的版本。它只是使用timeout() 来更新路径上的转换。

    <h1>SVG spinner</h1>
    <p>The javascript should be placed within the svg to maintain portability throughout different projects as we don't want to load all of the libraries required for a simple loading screen.</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 251.3 136" enable-background="new 0 0 251.3 136" xml:space="preserve" onload="init(evt)">
<script type="text/ecmascript"><![CDATA[

  var svgNS = "http://www.w3.org/2000/svg";

  function init(evt) {
    addRotateTransform('spinner', 0);
  }


  function addRotateTransform(target_id, angle) {
    var my_element = document.getElementById(target_id);
    var bb = my_element.getBBox();
    var cx = bb.x + bb.width/2;
    var cy = bb.y + bb.height/2;

    my_element.setAttribute("transform", "rotate("+angle+","+cx+","+cy+")");
    window.setTimeout(function() {
      addRotateTransform('spinner', angle+2);
    }, 16);
  }

]]></script>
<!-- The rest of the svg has been removed from here -->
<g>
  <path id="spinner" opacity="0.6" fill="#ed1b1e" d="M228.4,82.8c7.5,1.3,15.1-2.5,18.5-9.3c3.7-7.4,1.2-16.8-5.8-21.2c-0.9-0.6-1.8-1-2.8-1.4
    c-0.2-0.1-1-0.2-1.1-0.4c-0.1-0.1,0-1.1,0-1.3c-0.2-1.6-1.2-2.9-2.6-3.6c-1.3-0.7-2.6-0.5-4-0.4c-1.9,0.2-3.7,0.7-5.4,1.4
    c-7.4,3.1-11.9,10.3-11.9,18.2C213.1,73.7,220,81.4,228.4,82.8z m-7.9,-15.6c-0.4-2,0.3-4.5,1.2-6.3c1.1-2.2,2.9-4,5.2-5.1
    c1.9-0.9,3.7-0.9,5.7-1c2.2-0.1,4-1.6,4.5-3.7c5.8,2.3,9.7,8.3,9.2,14.6c-0.3,3.6-2,7-4.7,9.3c-2.8,2.4-5.9,3.2-9.5,3.2
    c0.3,0-0.2,0-0.3-0.1c-0.6-0.1-1.2-0.1-1.8-0.3c-1.8-0.4-3.5-1.3-4.9-2.4C222.4,73.4,220.9,70.5,220.5,67.2
    C220.4,66.8,220.5,67.4,220.5,67.2z"/>
</g>
</svg>