title: SVG scaling in javascript
body: <p>I am pretty new to SVG and I am stuck on how to scale a shape inside an SVG element.</p>
  
  <p>Can someone explain to me why the following doesn't work?  I would like to scale up the circle by 50%.</p>
  
  <p>Here is my jsfiddle with the example which doesn't scale the circle?</p>
  
  <p><a href="https://jsfiddle.net/q2buo2x7/" rel="noreferrer">https://jsfiddle.net/q2buo2x7/</a></p>
  
  <pre><code>&lt;svg height="150" width="150" id="outer"&gt;
      &lt;circle id="inner" cx="25" cy="20" r="20" fill="orange"/&gt;
  &lt;/svg&gt;
  
  &lt;script&gt;
      function zoom() {
          var outer = document.getElementById('outer');
          outer.setAttribute("currentScale", 1.5);
      }
      zoom();
  &lt;/script&gt;
  </code></pre>