title: SVG Rectangle inheriting width and height of parent
body: <p>In a nutshell, what I have is an SVG markup like this</p>
  
  <pre><code>&lt;svg width="700" height="700"&gt;
      &lt;g width="700" height="700"&gt;
          &lt;g width="66" height="140" class="bar"&gt;&lt;/g&gt;
          &lt;g width="132" height="140" class="bar"&gt;&lt;/g&gt;
          &lt;g width="99" height="140" class="bar"&gt;&lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Now I want to place SVG rectangles inside every bar. These rectangles should fill their according parenting bars. I checked specification of rectangle and found that percentage units allowed when we use width as attr, but they could have two possible meanings:<br/>
  1. percentage of viewport;<br>
  2. percentage of bounding box.<br>
  As far as I have width and height of bar groups set, it should work for me. But it doesn't — when I set width of rect element to 100%, it occupies whole SVG box.</p>