title: svg - flip upside down ex. graph
body: <p>I'm trying to work out a simple svg example - creating bar graph.
  However, I don't have clear grasp of how it works. I rotated an existing graph
  upside down but seems like there is a small offset. Corresponding jsfiddle here - <a href="http://jsfiddle.net/rhvP8/2/" rel="nofollow">http://jsfiddle.net/rhvP8/2/</a> </p>
  
  <pre><code>  &lt;div style="width:300px;height:300px;"&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300"&gt;
      &lt;g&gt;
          &lt;rect  width="14.55" height="40%" x="0" y="0" fill="black"&gt;&lt;/rect&gt;
          &lt;rect  width="14.55" height="20%" x="50" y="0" fill="green"&gt;&lt;/rect&gt;
          &lt;rect  width="14.55" height="80%" x="100" y="0" fill="red"&gt;&lt;/rect&gt;
          &lt;rect  width="14.55" height="90%" x="150" y="0" fill="yellow"&gt;&lt;/rect&gt;
          &lt;rect  width="14.55" height="10%" x="200" y="0" fill="pink"&gt;&lt;/rect&gt;
          &lt;rect  width="14.55" height="60%" x="250" y="0" fill="orange"&gt;&lt;/rect&gt;
      &lt;/g&gt;
  &lt;/svg&gt; 
  &lt;/div&gt;
  &lt;div style="width:300px;height:300px;"&gt;
   &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300"&gt;
      &lt;g transform="rotate(180)"&gt;
          &lt;rect  width="14.55" height="40" x="-50" y="-300" fill="black"&gt;&lt;/rect&gt;
          &lt;rect  width="14.55" height="20" x="-100" y="-300" fill="green"&gt;&lt;/rect&gt;
          &lt;rect  width="14.55" height="35" x="-150" y="-300" fill="red"&gt;&lt;/rect&gt;
          &lt;rect  width="14.55" height="90" x="-200" y="-300" fill="yellow"&gt;&lt;/rect&gt;
          &lt;rect  width="14.55" height="10" x="-250" y="-300" fill="pink"&gt;&lt;/rect&gt;
          &lt;rect  width="14.55" height="60" x="-300" y="-300" fill="orange"&gt;&lt;/rect&gt;
      &lt;/g&gt;
      &lt;/svg&gt; 
  &lt;/div&gt;
  </code></pre>