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技术预览和mac os下的firefox 35.0.1上进行了测试。

svg dom的编程模型在概念上等同于它的html对应物，因此vanilla js编程在两种环境中都是有效的。特别是，svg 1.1的svg dom实现了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>

用javascript操纵SVG？

1 个答案: