Question

I get some weird overflow whenever I want to fit an object inside foreignObject tag.
Take the code below. Instead of expanding to 100×100, the box expands to 120px, which is double the border width. I’ve tried nearly everything in my mind to counteract this effect, but nothing seems to solve the issue.

<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

It’s double the border width because you have a border on both sides, ten plus ten is twenty. 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>

The box-sizing CSS property lets you control what the width applies to.