Day: March 27, 2012

Moon move around the Earth

<!doctype html> <html> <head><title>Moon move around the Sun HTML5 index35</title></head> <body> <svg> <g id=’Earth’ transform=’translate(200,200)’> <circle cx=’347′ cy=’87’ r=’10’ fill=’blue’ /> <path id=’orbitMoon’ d=’M370,79 a30,17 0 1,0 1,1 z’  fill=’none’ stroke=’gray’ stroke-width=’1′ /> <circle cx=’0′ cy=’0′ r=’5′ fill=’yellow’ stroke=’black’ stroke-width=’1′ > <animateMotion dur=’2.8s’ fill=’freeze’ repeatCount=’indefinite’ > <mpath xlink:href=’#orbitMoon’ /> </animateMotion > </circle> </g> </svg> </body> […]

On Mouse Over HTML5

<!doctype html> <html><head><title>test Mouse Over HTML5 index34</title></head> <body> <svg width=”500″ height=”500″> <rect x=”5″ y=”5″ width=”100″ height=”100″ style=”fill:yellow”> <set attributeName=”fill” from=”yellow” to=”red” begin=”mouseover” end=”mouseout” /> </rect> <text x=”150″ y=”150″ font-size=”12″ fill=”blue”>Test Mouse Over <set attributeName=”font-size”  from=”10″ to=”50″ begin=”mouseover” end=”mouseout” /> </text> <rect x=”5″ y=”100″ width=”100″ height=”100″ style=”fill:green”> <animate attributeName=”opacity” from=”1″ to=”0″begin=”accesskey(1)” dur=”3s” fill=”restore”/> </rect> <a xlink:href=”www.google.com”> […]

Circle Translation with HTML5

<head>    <title>SVG Animation – Circle Translation</title> <script>  var timer;    var delay = 16; function s2d(s) {  return (s / 1000) * delay;   } function init() {   svgElement = document.getElementById(“svgElement”); circle0 = document.getElementById(“circle0″); timer = setInterval(doAnim, delay); circle0.vx = 150;       circle0.vy = 80;    } function doAnim() {     […]

Small picture down in HTML5

<!doctype html> <html> <head><title>Basic Animation HTML5 index31</title></head> <body> <svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”> <circle cx=”200″ cy=”200″ r=”60″ fill=”red”> <set attributeName=”r” to=”10″ begin=”3s” dur=”5s” /> </circle> </svg> </body> </html>

Expand border moving with HTML5

<!doctype html> <html><head><title>Basic Animation Moving Down HTML5 Index30</title></head> <body> <svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”> <rect x=”50″ y=”50″ height=”110″ width=”110″ style=”stroke:#ff0000; fill:#ccccff”> <animate attributeName=”y” from=”50″ to=”150″ begin=”0″ dur=”5s” /> <animate attributeType=”CSS” attributeName=”stroke-width” from=”1″ to=”25″ begin=”0″ dur=”5s” /> </rect> </svg> </body> </html>

Moving down with HTML5

<!doctype html> <html> <head><title>Basic Animation Moving Down HTML5 Index29</title></head> <body> <svg xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink”> <rect x=”50″ y=”50″ height=”110″ width=”110″ style=”stroke:#ff0000; fill:#ccccff”> <animate attributeName=”y” from=”50″ to=”150″ begin=”0″ dur=”5s” /> </rect> </svg> </body> </html>  

เปลี่ยนสี ด้วย HTML5

<!doctype html><html><head><title>Basic Animation Color HTML5 Index28</title></head><body><svg xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink”> <rect x=”300″ y=”300″ height=”110″ width=”110″ style=”stroke:#ff0000; fill:#ccccff”><animateColor attributeName=”fill” from=”rgb(100%,0%,0%)” to=”orange” begin=”0″ dur=”5s”</rect> </svg></body></html>

การ Transform ตัวอักษร ด้วย HTML5

<!doctype html> <html> <head><title>Transform Graphics HTML5</title></head> <body> <svg xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink”><defs> <rect x=”50″ y=”50″ height=”110″ width=”110″ style=”stroke:#ff0000; fill:#ccccff”transform=”translate(30) rotate(45 50 50) scale(2 2)”> </rect> </defs> <text x =”70″ y=”100″ transform=”translate(30) rotate(45 50 50) scale(2 2) “>Hello World</text> </svg> </body> </html>  

เมื่อกดคลิกที่ภาพแล้วภาพเล็กลง ด้วย HTML5

<!doctype html> <html> <head><title>test HTML5</title></head> <body> <svg xmlns=”http://www.w3.org/2000/svg”> <script type=”text/javascript”> function shrink() {var img1=document.getElementById(“image1”); var x=parseInt(img1.getAttribute(“width”)); x-=5;img1.setAttribute(“width”,x);} </script> <image id=”image1″ x=”20″ y=”20″ width=”200″ height=”200″xlink:href= “image1.gif” onclick=”shrink()” /> </svg></body></html> วิธีทำต้อง Load รูปไปไว้ใน inetpub\wwwroot ก่อน After click on the picture…picture get smaller and smaller

การเอารูปภาพมาวางบน web ด้วย HTML5

<!doctype html> <html><head><title>test HTML5</title></head> <body> <svg id=”svgelem” height=”200″ xmlns=”http://www.w3.org/2000/svg”> <defs> <radialGradient id =”gradient” cx=”50%” cy=”50%” r=”50%” fx=”50%” fy=”50%”> <stop offset=”0%” style=”stop-color:rgb(200,200,200); stop-opacity:0″/> <stop offset=”100%” style=”stop-color:rgb(0,0,255); stop-opacity:1″/></radialGradient> </defs> <image xlink:href= “13.gif” x=”10″ y=”10″ width=”200″ height=”200″/> </svg> </body> </html> วิธีทำต้อง load รูปภาพไปไว้ใน Inetpub\wwwroot ก่อน และเมื่อกด CTRL+ หรือ CTRL- จะสามารถขยายหรือลดขนาดรูปได้โดยภาพไม่แตก