SVG mit Javascript manipulieren?

Question

Wie steuere ich SVG im folgenden Code? Es ist ein JS-Code, der die Erde SVG um die Sonne SVG drehen sollte. Mein einziges Problem, ich habe noch nie mit SVG in Kombination mit JS gearbeitet? Sobald ich weiß, wie man die Erde svg dreht, werde ich herausfinden, wie man diese anderen Planeten macht, also ignoriere diese anderen einfach.

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

Und meine Drehung JS-Code:

<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

Das folgende eigenständige svg wird aus dem Beispielcode in der Frage und stellt ein animiertes Modell der umlaufenden Planeten vorgesehen abgeleitet des Sonnensystems (ohne Anspruch auf wahrheitsgemäße physikalische Realitäten natürlich zu entscheiden ...). Es wurde auf Safari 9.1, Safari 9.1.1 Tech Vorschau und Firefox 35.0.1 unter Mac OS getestet.

Das Programmiermodell für die Svg-Dom ist konzeptuell äquivalent zu seinem HTML-Gegenstück, so dass die Vanille-js-Programmierung in beiden Umgebungen effektiv äquivalent ist. Insbesondere sind alle die svg dom von SVG 1.1 Geräte-Schnittstellen von DOM Level 2. Appendix B of the W3C SVG 1.1 standard bietet die blutigen technischen Details ...

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