title: SVG in viewBox, CSS in the "box-sizing: border-box;" When used in combination, position becomes point
body: <p><strong>Why, "box-sizing: border-box;" only when it is used, and become a point?</strong></p>
  
  <p>Please tell me whether guided by what formula?</p>
  
  <hr>
  
  <p><strong>Chrome Version</strong></p>
  
  <p>44.0.2403.157 m</p>
  
  <hr>
  
  <p><strong>Do not use box-sizing</strong></p>
  
  <pre><code>&lt;style&gt;
  svg {
    border: 1px solid #ddd;
  }
  &lt;/style&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;svg preserveAspectRatio="none" viewBox="0 0 2000 400" width="500" height="400"&gt;
    &lt;rect id="hoge" x="50" y="50" width="50" height="50"/&gt;
  &lt;/svg&gt;
  &lt;script&gt;
    console.log($("#hoge").offset()); //Object {top: 59, left: 21.5}
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>use box-sizing</strong></p>
  
  <pre><code>&lt;style&gt;
  svg {
    border: 1px solid #ddd;
  }
  * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  }
  &lt;/style&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;svg preserveAspectRatio="none" viewBox="0 0 2000 400" width="500" height="400"&gt;
    &lt;rect id="hoge" x="50" y="50" width="50" height="50"/&gt;
  &lt;/svg&gt;
  &lt;script&gt;
    console.log($("#hoge").offset()); //Object {top: 58.75, left: 21.450000762939453}
  &lt;/script&gt;
  </code></pre>