foreignObject元素內部的奇怪溢出

Question

每當我想要在foreignObject標記中合適一個對象時，我會發生一些奇怪的溢出。 拿下面的代碼。而不是擴大到100x100，框擴展到120px，這是邊界寬度的兩倍。我幾乎想盡辦法抵消這種影響，但似乎沒有任何辦法可以解決這個問題。

<svg width="4in" height="3in" version="1.1" 
xmlns = 'http://www.w3.org/2000/svg'> 
    <foreignObject width="100" height="100"> 
     <div style="width:100%;height:100%;background-color: #fcefa1;border:10px solid  #ff0000;"></div> 
    </foreignObject> 
</svg> 

Answer 1

它的雙邊框的寬度，因爲你必須在雙方邊界，十加十是二十歲。 Try this：

<svg width="4in" height="3in" version="1.1" 
xmlns = 'http://www.w3.org/2000/svg'> 
    <foreignObject width="100" height="100"> 
     <div style="width:100%;height:100%;background-color: #fcefa1;border:10px solid #ff0000; -moz-box-sizing: border-box; box-sizing: border-box;"></div> 
    </foreignObject> 
</svg> 

的box-sizing CSS property讓你控制什麼的寬度適用。