以下に問題の例を示します(FirefoxとChromeでテスト済み):
<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>
青いred
の下のdiv
内の余分なsvg
スペースに注意してください。
両方の要素のpadding
とmargin
を0
に設定しようとしましたが、運はありませんでした。
svg
にdisplay: block;
が必要です。
<svg style="display: block;"></svg>
これは、インラインブロック要素(<svg>
や<img>
など)がテキストベースライン上にあるためです。表示されている余分なスペースは、文字ディセンダー(「y」、「g」などの末尾)を収容するために残されたスペースです。
inline
またはvertical-align:top
を保持する必要がある場合は、inline-block
を使用することもできます
別の方法は、font-size: 0
をsvg parent
に追加することです。
Svgのdisplay
プロパティをblock
に変更します。
height:100px
をdiv
に追加し、svg
でheight="100%"
を使用してみてください。
<div style="background-color:red;height:100px">
<svg height="100%" width="100" style="background-color:blue;"></svg>
</div>
メインdiv要素に高さを追加するだけです
<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div>
スタイルを変更します
style = "background-color:red; line-height:0;"