NGÔI SAO CHỚP SÁNG CHẠY TRÊN QUỶ ĐẠO QUANH CO

NGÔI SAO CHƠP SÁNG CHẠY TRÊN QUỶ ĐẠO QUANH CO.

Vẽ hình ngôi sao và vẽ quỷ đạo quanh co theo phương pháp SVG (Scalable Vector Gaphics).

SVG phát minh năm 1998 bởi nhóm chuyên viên tiêu chuẩn quốc tế “W3C SVG Working Group”

Áp dụng hương dần của SMIL làm ngôi sao chơp sáng thay đổi màu và di chuyển trên quỷ đạo quanh co theo ý muốn .

SMIL (Synchronized Multimedia Integration Language) là phần nối tiêp của SVG (extension of SVG ).

         *****************************

<svg  xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">    

<g id ="B">

<text x="180" y="150" font-size ="25" fill="blue" >START</g>

<g id = "S">

<text x="280" y="150" font-size ="25" fill="red" >STOP</g>

<g>

<polygon points="90,5  30,120 165,50 15,50 150,120" fill="red"

stroke="purple" stroke-width="10" transform="scale(0.2)"

transform ="translate(-250,-150)"</polygon>

<animate attributeName="stroke" begin="B.click" from="yellow"  repeatCount="indefinite" to="blue" dur="3s" end="S.click"/>

</animate>     

<animateMotion

path ="M 20 40,C 450 90,180 90,20 160 L120 160z//không có d                     

stroke="blue" stroke-width="3" fill="none" rotate="auto"    begin="B.click"dur="10s" repeatCount="indefinite"end="S.click"/>

</animateMotion>   

</polygon>                       

</g>

<g>  

<path id="curve"

 d="M 20 40,C 450 90,180 90,20 160 L120 160z"                 

 stroke="blue" stroke-width="3" fill="none"/             

</g</svg>         

                    GHI CHÚ              

Muốn vòng tròn chạy trên quỷ đạo quanh co thì thay thế polygon bằng codes của vòng tròn như sau.

 <g>

<circle  cx="50" cy="50" r="20" fill="red"

stroke="blue" stroke-width="18"

transform="translate(-45,-50)"> </circle>