使用Javascript動畫SVG的動畫效果

Question

我目前正在測試不同的選項，以便直接在.svg文件中動畫化SVG文件。現在我正在用includet javascript測試動畫。問題是，我沒有得到正確的旋轉原點工作。

我的代碼目前正在尋找這樣的：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"> 


<g> 
    <g> 
     <path class="bag" fill="#016D49" d="M42.1,45.6c-6.7,0-13.5,0-20.2,0c-0.2,0-0.3-0.1-0.3-0.3c0.4-6.9,0.9-13.8,1.3-20.7c0-0.2,0.2-0.3,0.3-0.3 
      c5.9,0,11.7,0,17.6,0c0.2,0,0.3,0.1,0.3,0.3c0.4,6.9,0.9,13.8,1.3,20.7C42.4,45.5,42.3,45.6,42.1,45.6z"/> 
    </g> 
    <g> 
     <path fill="#016D49" d="M27.8,23.1c0-0.2,0.1-0.5,0.1-0.8c0.9-5.3,4.1-5,4.2-5c0,0,3-0.3,4,5c0,0.3,0.1,0.6,0.2,0.8H38 
      c0-0.2-0.1-0.5-0.2-0.8c-0.2-0.7-0.4-1.3-0.6-2.1c-1.2-3.1-3-4.7-5.4-4.6c-3.6,0.2-5.1,3.8-5.6,6.6c0,0.3-0.1,0.6-0.1,0.8 
      L27.8,23.1L27.8,23.1z"/> 
    </g> 
</g> 
<g id="loadingRing"> 

     <circle fill="none" stroke="#016D49" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="7.0201,7.0201" cx="32" cy="32" r="26.8"> 

    </circle> 
    <script language="JavaScript" type="text/javascript"> 
var zpos=0; 
function turnAround(){ 
zpos++; 
    if(zpos>359)zpos=0; 
    var dz=document.getElementById("loadingRing"); 


    dz.style.transform = "rotate("+zpos+"deg) translate(1%,1%)"; 

    window.setTimeout("turnAround()", 14); 
} 
turnAround(); 
</script> 
</g> 
</svg> 

所以我缺少什麼，或者確實有一個更好的解決方案存在嗎？也許有可能包含jquery的svg文件？

在此先感謝

Answer 1

也許你應該堅持正常SVG工具，而不是在爲微不足道的東西旋轉複雜的事情。

這是我不清楚你想要什麼旋轉，所以我讓他們兩個旋：

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"> 
 

 
<g> 
 
    <g> 
 
     <path class="bag" fill="#016D49" d="M42.1,45.6c-6.7,0-13.5,0-20.2,0c-0.2,0-0.3-0.1-0.3-0.3c0.4-6.9,0.9-13.8,1.3-20.7c0-0.2,0.2-0.3,0.3-0.3 
 
      c5.9,0,11.7,0,17.6,0c0.2,0,0.3,0.1,0.3,0.3c0.4,6.9,0.9,13.8,1.3,20.7C42.4,45.5,42.3,45.6,42.1,45.6z"/> 
 
    </g> 
 
    <g> 
 
     <path fill="#016D49" d="M27.8,23.1c0-0.2,0.1-0.5,0.1-0.8c0.9-5.3,4.1-5,4.2-5c0,0,3-0.3,4,5c0,0.3,0.1,0.6,0.2,0.8H38 
 
      c0-0.2-0.1-0.5-0.2-0.8c-0.2-0.7-0.4-1.3-0.6-2.1c-1.2-3.1-3-4.7-5.4-4.6c-3.6,0.2-5.1,3.8-5.6,6.6c0,0.3-0.1,0.6-0.1,0.8 
 
      L27.8,23.1L27.8,23.1z"/> 
 
    </g> 
 
    <animateTransform attributeName="transform" 
 
          attributeType="XML" 
 
          type="rotate" 
 
          from="360 32 32" 
 
          to="0 32 32" 
 
          dur="10s" 
 
          repeatCount="indefinite"/> 
 
</g> 
 
<g id="loadingRing"> 
 

 
     <circle fill="none" stroke="#016D49" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="7.0201,7.0201" cx="32" cy="32" r="26.8"> 
 

 
    </circle> 
 
    
 
    <animateTransform attributeName="transform" 
 
          attributeType="XML" 
 
          type="rotate" 
 
          from="0 32 32" 
 
          to="360 32 32" 
 
          dur="5s" 
 
          repeatCount="indefinite"/> 
 
    
 
    </g> 
 
</svg>

---

在這裏，你走了，帶着腳本版本，不切實際，但因爲你想要它...

dz.setAttribute("transform", "rotate(" + zpos + " 32 32)"); 

<?xml version="1.0" encoding="utf-8"?> 
 
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"> 
 

 

 
<g> 
 
    <g> 
 
     <path class="bag" fill="#016D49" d="M42.1,45.6c-6.7,0-13.5,0-20.2,0c-0.2,0-0.3-0.1-0.3-0.3c0.4-6.9,0.9-13.8,1.3-20.7c0-0.2,0.2-0.3,0.3-0.3 
 
      c5.9,0,11.7,0,17.6,0c0.2,0,0.3,0.1,0.3,0.3c0.4,6.9,0.9,13.8,1.3,20.7C42.4,45.5,42.3,45.6,42.1,45.6z"/> 
 
    </g> 
 
    <g> 
 
     <path fill="#016D49" d="M27.8,23.1c0-0.2,0.1-0.5,0.1-0.8c0.9-5.3,4.1-5,4.2-5c0,0,3-0.3,4,5c0,0.3,0.1,0.6,0.2,0.8H38 
 
      c0-0.2-0.1-0.5-0.2-0.8c-0.2-0.7-0.4-1.3-0.6-2.1c-1.2-3.1-3-4.7-5.4-4.6c-3.6,0.2-5.1,3.8-5.6,6.6c0,0.3-0.1,0.6-0.1,0.8 
 
      L27.8,23.1L27.8,23.1z"/> 
 
    </g> 
 
</g> 
 
<g id="loadingRing"> 
 

 
     <circle fill="none" stroke="#016D49" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="7.0201,7.0201" cx="32" cy="32" r="26.8"> 
 

 
    </circle> 
 
    <script language="JavaScript" type="text/javascript"> 
 
var zpos=0; 
 
function turnAround(){ 
 
zpos++; 
 
    //if(zpos>359)zpos=0; 
 
    var dz=document.getElementById("loadingRing"); 
 

 

 
    //dz.style.transform = "rotate("+zpos+"deg 32 32)"; 
 
    dz.setAttribute("transform", "rotate(" + zpos + " 32 32)"); 
 

 
    window.setTimeout("turnAround()", 14); 
 
} 
 
turnAround(); 
 
</script> 
 
</g> 
 
</svg>

注：

1. 我不能使它與改變樣式屬性的工作。不知道爲什麼。
2. 你並不需要從359到0度復位無論如何都會計算MOD 360