SVG in viewBox，CSS中的「box-sizing：border-box;」當組合使用時，位置變爲點

Question

爲什麼「盒子尺寸：邊框」;只有當它被使用，併成爲一個點？

請告訴我是否由什麼公式引導？

---

的Chrome版本

44.0.2403.157米

---

不要使用箱大小

<style> 
svg { 
    border: 1px solid #ddd; 
} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<svg preserveAspectRatio="none" viewBox="0 0 2000 400" width="500" height="400"> 
    <rect id="hoge" x="50" y="50" width="50" height="50"/> 
</svg> 
<script> 
    console.log($("#hoge").offset()); //Object {top: 59, left: 21.5} 
</script> 

---

使用盒大小

<style> 
svg { 
    border: 1px solid #ddd; 
} 
* { 
-webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
     box-sizing: border-box; 
} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<svg preserveAspectRatio="none" viewBox="0 0 2000 400" width="500" height="400"> 
    <rect id="hoge" x="50" y="50" width="50" height="50"/> 
</svg> 
<script> 
    console.log($("#hoge").offset()); //Object {top: 58.75, left: 21.450000762939453} 
</script> 

Answer 1

當您使用邊界框的內容寬度改變，而不是使用高度400像素，現在只能用（x 400像素 - 2px的）398px。因爲這個svg本身必須顯示更小。

墊層計算爲你的例子如下所示： offset.top = margin of body + border + (svg content height/viewBox height * rect y)

在你的第一個例子中，這意味着 ：8px (default value) + 1px + (400px/2000 * 50) = 59

你的第二個例子： 8px (default value) + 1px + (398px/400 * 50) = 58.75

讀this css-tricks article用於進一步解釋盒模型。