Year: 2012

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- จะสามารถขยายหรือลดขนาดรูปได้โดยภาพไม่แตก

การวาดวงรีสีเหลือบ ด้วย HTML5

<!doctype html> <html> <head><title>Gradient 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> <ellipse cx=”200″ cy=”100″ rx=”200″ ry=”100″ style=”fill:url(#gradient)”/> </svg> </body> </html> เมื่อกด Ctrl+/Ctrl- จะเพิ่มขนาดหรือขยายภาพที่วาดไว้ได้ด้วยภาพไม่แตก

การวาดวงกลมและตัวอักษร

<!doctype html> <html> <head><title>test HTML5</title></head> <body> <svg smlns=”http://www.w3.org/2000/” width=”300″ height =”300″> <text style=”font-size:30; stroke:red” x=”10″ y=”170″>Hello SVG World </text><circle id=”redcircle” cx=”250″ cy=”250″ r=”50″ fill=”green” /></svg></body></html>