0

foreignObjectタグ内にオブジェクトを収めたいときはいつでも、奇妙なオーバーフローが発生します。以下のコードを取ります。ボックスは100x100に拡張する代わりに、境界線の幅の2倍である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>

オーバーフローの問題

4

1 に答える 1

1

両側に境界線があるため、境界線の幅は2倍になります。10プラス10は20です。 これを試してください：

<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プロパティを使用すると、幅を適用する対象を制御できます。

于 2012-06-25T20:59:46.780 に答える