IE瀏覽器（全部）的SVG旋轉失敗

我有一個需要旋轉元素的SVG動畫。由於IE不支持它們，並且beginElement（）屬性在IE或Firefox中也不受支持，所以SMIL和基於css的動畫不存在問題。 IE的大小調整不是問題，因爲CSS修復得很好。IE瀏覽器（全部）的SVG旋轉失敗

問題在於它不是一個標準形狀（矩形，圓形等），所以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 
    } 
}

來源

2015-07-06 Stuart Harding

IE不支持SMIL。你可以試試fakeSmile（https://leunen.me/fakesmile/） –

感謝Robert，使用另一個庫在這裏沒有幫助，因爲它需要被封裝爲thingemebob，而fakeSmile目前還不支持旋轉。 –

您需要使用純JavaScript並操作DOM。 –

這是一個使用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>

來源

2015-07-06 13:22:04

太棒了！非常感謝。我將更新plunk以顯示工作版本。 –

IE瀏覽器（全部）的SVG旋轉失敗

回答

相關問題