title: How does setting viewBox attribute, affects the user coordinates
body: <p>I have the following code: <a href="http://jsfiddle.net/fCWJ5/1/" rel="nofollow noreferrer">http://jsfiddle.net/fCWJ5/1/</a>, and following doubts regarding the viewbox.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{margin:0;}
  #test{width:200px;height:200px;border:solid red 1px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div id="test"&gt;
          &lt;!-- preserveAspectRatio="xMinYMin meet" --&gt;
          &lt;svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 150" 
          xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"&gt;
            &lt;g&gt;
              &lt;rect class="drag resize" x="150" y="50" width="50" height="50" fill="#c66" /&gt;
            &lt;/g&gt;
          &lt;/svg&gt;
      &lt;/div&gt;    
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ol>
  <li>From the fiddle one user coordinate = .2, this I got by dividing
  200/1000 (test div width / viewBox width attribute). According to
  this, the rectangle should be at (30px, 10px), with a width and
  height of 10px, 10px respectively. But the rectangle is at
  (30px,97px), with a width and height of 10px,10px (some how height
  and width is correct as per calculation.). Please point out why the
  y coordinate is wrong.</li>
  <li>Then I gave preserveAspectRatio="xMinYMin meet" as said in a svg
  tutorial pdf. It was working fine for this value. But for other
  value the display goes for toss. Please explain what is this. I
  already asked a question regarding this
  <a href="https://stackoverflow.com/questions/8312393/could-not-able-to-put-viewbox-viewport-userspace-together-and-get-the-picture">could not able to put viewbox,viewport,userspace together and get the picture</a>.
  I'm unable to understand the answer and the concept.</li>
  <li>what will be the value of the ratio, if I didn't specified any width
  and height for the svg dom element container.</li>
  <li>I'm seeing that the ratio 1.3, (height of the test div/height
  attribute of the viewBox), is not used. Should that be used for
  calculating things like height,y coordinates.</li>
  </ol>