Scaling a circle in SVG - Javascript DOM HTML Element

Javascript examples for DOM HTML Element:SVG

  1. HOME
  2. Javascript
  3. DOM HTML Element
  4. SVG

Description

Scaling a circle in SVG

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
console.clear();
function scale() {/*from   w  w  w  .  j ava  2 s  . co  m*/
    document.querySelector("#container > circle").setAttribute('transform', 'scale(1.5,1.5)');
}

      </script> 
   </head> 
   <body> 
      <svg height="150" width="150" id="container"> 
         <circle cx="25" r="20" cy="20" fill="blue" id="circle"></circle> 
      </svg> 
      <button id="zoom" onclick="scale()">scale</button>  
   </body>
</html>

Related Tutorials