topical media & game development

talk show tell print

mobile-game-ch14-birdhouse.htm / htm



  <!DOCTYPE HTML>
  <html lang="en">
  <head>
          <meta charset="UTF-8">
          <title>A Birdhouse</title>
  </head>
  <body>
  
  <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" version="1.1" 
       width="400" height="400" 
       viewbox="0 0 150 150" >
    <g transform="rotate(-5,75,75)">
      <rect id="rect" x="50" y="50" rx="5" ry="5" width="50" height="50" fill="black" />
      <circle id="circle" cx="75" cy="75" r="10" fill="#CCC"/>
      <path d="M 50 50 L 75 50 L 75 0 z"
            fill="black" stroke="#CCC" stroke-width="2"/>
      <polygon points="75,50 100,50 75,0" 
            fill="#CCC" stroke="black" stroke-width="2"/>
    </g>
    <image xlink:href='mobile-game-ch14-images-penguin.png' 
       width='32' height='32'  
       transform="translate(75,75)"
       ontouchstart="alert('Penguin Touch');" />
  
    <text x="75" y="125" text-anchor="middle"
          font-family="Verdana" font-size="10" fill="black" >
      A tilted birdhouse
    </text>
  </svg>
  
  <script>
   var svg = document.getElementById('mysvg');
  
   var rect = svg.getElementById('rect');
  
   rect.addEventListener('touchstart',function(e) {
     alert('Touched!');
     e.preventDefault();
  
   });
  </script>
  
  </body>
  </html>
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.