title: Resizing SVG rect elements inside G tag
body: <p>I'm using a SVG in a website but I am having some trouble resizing it. It is displayed inside the website's header and, before I implemented the SVG (was using a normal image), I was resizing the image like this:</p>
  
  <pre><code>$("#block_175 img").height($("#header").height() / 2);
  </code></pre>
  
  <p>Now, since I am using the SVG, I tried several ways of resizing it but I can't seem to find how to do it. Here is how I built the SVG:</p>
  
  <pre><code>&lt;div id='block_175' class=''&gt;
  &lt;svg width="100" height="100"&gt;
      &lt;g id="cross_svg"&gt;
          &lt;rect id="Rectangle-1"  x="0" y="0" width="48" height="2" fill="transparent"&gt;&lt;/rect&gt;
          &lt;rect id="Rectangle-2"  x="0" y="14" width="48" height="2" fill="transparent"&gt;&lt;/rect&gt;
          &lt;rect id="Rectangle-4"  x="0" y="28" width="48" height="2" fill="transparent"&gt;&lt;/rect&gt;
      &lt;/g&gt;    
  &lt;/svg&gt; 
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>svg 
  {
      width: 52px;
      height: 52px;
      z-index: 99999;
      transition: all .3s ease;
      cursor: pointer;
  }
  
  svg g 
  {
      transition: all .3s ease;
      width: 100px;
      height: 100px;
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: auto;
      cursor: pointer;
  }
  
  svg rect 
  {
      transition: all .3s ease;
      fill: #ffffff;
  }
  
  svg g 
  {
      width: 100px;
      height: 100px;
  }
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>svg.on('click', function()
          {
              if (i) 
              {
                  setTimeout(function()
                  {
                      $(this).find("g").addClass('gotcha');
  
                      line_first.css(
                      {
                          'transform':'rotate(45deg)',
                          'left':'50%',
                          'top':'50%',
                          'width':'200px',
                          // This line BELONGS to @dervondenbergen :D 
                          // Enjoy your propriety my friend.
                          'transform-origin': 'left bottom'
                      })
                      line_third.css(
                      {
                          'transform':'rotate(-45deg) translate(-50%,-50%)',
                          'left':'50%',
                          'top':'50%'
                      })
                      line_second.css('opacity','0')
                  },005)
              } 
              else 
              {
                  setTimeout(function()
                  {
                      line_first.attr('style', '');
                      line_third.attr('style', '');
                      line_second.css('opacity','1')
                  },005)
              }
  
              i =! i; 
  
              $("#mobile_menu").slideToggle();
          });
  </code></pre>
  
  <p>So, resuming: I need the SVG to have half the height of #header but I can't find out how to resize the whole SVG. </p>
  
  <p>Thanks.</p>
  
  <p>EDIT 1: (thank you, Pavel Gatnar)</p>
  
  <p>Changed the CSS to this</p>
  
  <pre><code>    svg 
  {
  
          width: 100%;
          height: 100%;
          z-index: 99999;
          transition: all .3s ease;
          cursor: pointer;
      }
  
      svg g 
      {
          transition: all .3s ease;
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          left: 50%;
          top: 50%;
          margin: auto;
          cursor: pointer;
      }
  
      svg rect 
      {
          transition: all .3s ease;
          fill: #ffffff;
      }
  </code></pre>
  
  <p>and I'm now resizing the container div instead of the SVG itself, but it doesn't work either. The G element keeps overflowing out of the container div...</p>