svg - foreignObject 元素内的奇怪溢出

Question

每当我想在foreignObject标签内放置一个对象时，我都会得到一些奇怪的溢出。拿下面的代码。盒子没有扩展到 100x100，而是扩展到 120 像素，这是边框宽度的两倍。我已经尝试了几乎所有的想法来抵消这种影响，但似乎没有任何东西可以解决这个问题。

<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

它是边框宽度的两倍，因为两边都有边框，十加十等于二十。 试试这个：

<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-sizingCSS 属性允许您控制宽度适用于什么。