用JavaScript处理SVG？

Question

如何在下面的代码中控制SVG？这是一个JS代码，应该围绕太阳SVG旋转地球SVG。我唯一的问题，我从来没有与SVG结合使用JS之前？一旦我知道如何旋转地球svg，我会弄清楚如何做其他行星，所以只要忽略其他行星。

我svgs：

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 1000 600"> 
    <style> 
    .st0{fill:#FFFF00;} .st1{fill:#808080;} .st2{fill:#EA9C4E;} .st3{fill:#3FA9F5;} .st4{fill:#F15A24;} .st5{fill:#DDC966;} .st6{fill:#A566C6;} .st7{fill:#3D9EC9;} .st8{fill:#2C709B;} 
    </style> 
    <circle id="Sun" cx="496.3" cy="300.4" r="45.2" class="st0"/> 
    <circle id="Mercury" cx="423.6" cy="300.8" r="5.8" class="st1"/> 
    <circle id="Venus" cx="576.8" cy="250.7" r="10.3" class="st2"/> 
    <circle id="Earth" cx="386.2" cy="357.4" r="11" class="st3"/> 
    <circle id="Mars" cx="628.8" cy="360.7" r="8.2" class="st4"/> 
    <circle id="Jupiter" cx="505.9" cy="509.8" r="19.6" class="st5"/> 
    <circle id="Saturn" cx="402.1" cy="156.8" r="14.2" class="st6"/> 
    <circle id="Uranus" cx="235.9" cy="265.9" r="7" class="st7"/> 
    <circle id="Neptune" cx="737.7" cy="310.1" r="9" class="st8"/> 
</svg> 

我的旋转JS代码：

<script> 
    function rotate_point(pointX, pointY, originX, originY, ang) { 
     ang = Math.PI/180.0; 
     return { 
      x: Math.cos(ang) * (pointX-originX) - Math.sin(ang) * (pointY-originY) + originX , 
      y: Math.sin(ang) * (pointX-originX) + Math.cos(ang) * (pointY-originY) + originY 
     }; 
    } 

    var Solarsystem = { 
     Earth: 
     { 
      render: function() 
      {    
       st0(386.2,357.4,10, 0, 2*Math.PI, true);        
      } 
     } 
     , Sun: { 
      render: function(){    
       gravitySun = rotate_point(); 
        st0(496.3,300.4,10, 0, 2*Math.PI, true);       
       } 
      } 
     }  
      function animate() 
{ 

     }  
     var animateInterval = setInterval(animate, 1000/60); 
    } 
    </script> 

Answer 1

以下独立SVG是从问题提供的示例代码衍生的，代表了轨道行星的动画模型（当然没有任何真实地决定物理现实的主张......）。它已经在safari 9.1，safari 9.1.1技术预览和firefox 35.0.1下在mac os上测试过。

svg dom的编程模型在概念上等价于它的html对应物，所以vanilla js编程在两种环境中都是等效的。特别是，SVG的SVG DOM 1.1器具从DOM级别2 Appendix B of the W3C SVG 1.1 standard提供了血淋淋的技术细节，所有的接口...

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 1000 600"> 
<script> 
    function rotate_point(pointX, pointY, originX, originY, ang) { 
     ang = ang * Math.PI/180.0; 
     return { 
      x: Math.cos(ang) * (pointX-originX) - Math.sin(ang) * (pointY-originY) + originX , 
      y: Math.sin(ang) * (pointX-originX) + Math.cos(ang) * (pointY-originY) + originY 
     }; 
    } // rotate_point 

    // 
    // render 
    // generic rendering of a unit orbital progression of a planet 
    // 
    function render (planet) { 
     var x, y, x_sun, y_sun, e, c_new 
      ; 
     e = document.getElementById (planet); 
     x = parseFloat (e.getAttribute ("cx")); 
     y = parseFloat (e.getAttribute ("cy")); 
     x_sun = parseFloat (document.getElementById ("Sun").getAttribute ("cx")); 
     y_sun = parseFloat (document.getElementById ("Sun").getAttribute ("cy")); 
     c_new = rotate_point (x, y, x_sun, y_sun, 1.0/Solarsystem[planet].period * 2.0); 
     e.setAttribute ("cx", c_new.x); 
     e.setAttribute ("cy", c_new.y); 
    } // render  


    var Solarsystem = { 
      Mercury: { period: 0.25 } 
     , Venus: { period: 1.41 } 
     , Earth: { period: 1.0 } 
     , Mars: { period: 2.0 } 
     , Jupiter: { period: 2.5 } 
     , Saturn: { period: 3.5 } 
     , Uranus: { period: 7.0 } 
     , Neptune: { period: 5.0 } 
    }; 

    function animate() { 
     render("Mercury"); 
     render("Venus"); 
     render("Earth"); 
     render("Mars"); 
     render("Jupiter"); 
     render("Saturn"); 
     render("Uranus"); 
     render("Neptune"); 
    }  

    var animateInterval = setInterval(animate, 1000/60); 
</script> 
<style> 
    .st0{fill:#FFFF00;} .st1{fill:#808080;} .st2{fill:#EA9C4E;} .st3{fill:#3FA9F5;} .st4{fill:#F15A24;} .st5{fill:#DDC966;} .st6{fill:#A566C6;} .st7{fill:#3D9EC9;} .st8{fill:#2C709B;} 
</style> 
    <circle id="Sun" cx="496.3" cy="300.4" r="45.2" class="st0"/> 
    <circle id="Mercury" cx="423.6" cy="300.8" r="5.8" class="st1"/> 
    <circle id="Venus" cx="576.8" cy="250.7" r="10.3" class="st2"/> 
    <circle id="Earth" cx="386.2" cy="357.4" r="11" class="st3"/> 
    <circle id="Mars" cx="628.8" cy="360.7" r="8.2" class="st4"/> 
    <circle id="Jupiter" cx="505.9" cy="509.8" r="19.6" class="st5"/> 
    <circle id="Saturn" cx="402.1" cy="156.8" r="14.2" class="st6"/> 
    <circle id="Uranus" cx="235.9" cy="265.9" r="7" class="st7"/> 
    <circle id="Neptune" cx="737.7" cy="310.1" r="9" class="st8"/> 
</svg>