title: How to resize an SVG animation?
body: <p>I am stuck at resizing an svg animation to a different percentages of the page.</p>
  
  <p>I have created a circle that increases its size and then goes back to normal with this:</p>
  
  <pre><code>&lt;svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  &lt;circle id="myCircle" cx="600" cy="250" r="70" fill="yellow" stroke="green" stroke-width="5"&gt;
  &lt;animate attributeName="r" values="70; 140; 210; 140; 70" dur="10s" repeatCount="indefinite"/&gt;
  &lt;/circle&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Then, when I change the área size of the svg, the circle does not change its size nor the position within this area.</p>
  
  <p>I have tried to scale the animation with CSS giving size to the body in pixels and then assign an area to the SVG in percentages:</p>
  
  <pre><code>body{
  width: 1440px;
  heigth: 990px
  }
  
  #mySVG{
  width: 100%;
  }
  </code></pre>
  
  <p>Also, I tried to change size with javascript:</p>
  
  <pre><code>function resize(){
  var svg = document.getElementById("mySVG");
          svg.style.width = window.innerWidht;
  svg.style.height = window.innerHeight;
  } 
  </code></pre>
  
  <p>None of them worked…  wondering what is the best method to scale SVG animations not only with this circle but with SVG animations in general.</p>
  
  <p>Thank’s in advanced.</p>