4

SVGを内部に持つコンテナdivがあります：

<!DOCTYPE html>
<body>
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="200">
    <rect x="0" y="0" width="50" height="200" />
    </svg>
    </div>
</body>

そして次のCSS：

svg
{
    width: 100%;
    height: 100%;
}
div.container
{
    width: 100%;
    background-color: red;
}

Firefox、Chromeなどでは、コンテナdivはsvgの高さに一致します。ただし、これはIEには当てはまりません（IE9でテストしました）。幅/高さを削除：svgスタイルブロックから100％でこれを修正しますが、SVGをスケーリングするためにこれらのスタイルが必要です（この例のjsfiddleではSVG要素のpreserveAspectRatioを省略しています）。

これがjsfiddleです：http： //jsfiddle.net/Cx5jR/

私はzoom：1を使用して、IEにdiv要素のhasLayoutを認識させることができると考えていましたが、これは機能しませんでした。

何か案は？

IE9でのレンダリングの外観のスクリーンショットを次に示します。div（赤い背景）がSVG（黒い長方形）の高さより下に拡大縮小されていないことに注意してください。

IE9バグsvgスケールbg

4

1 に答える 1

3

SVGには現在viewBox、一貫したクロスブラウザレンダリングに必要な属性がありません。CSSでSVGとSVGを100％にviewBox設定することと相まって、の欠如が問題の根本にあるようです。widthheight

ChromeとIE9で一貫したレンダリングを行うjsfiddleは次のとおりです：http：//jsfiddle.net/Cx5jR/3/。

<svg>以下がタグ に追加されます: viewBox="0 0 50 200" (X座標の開始、Yの開始、Xの終了、Yの終了）

そしてheight、widthCSSでの<svg>が削除されます。

于 2013-03-03T12:32:13.280 に答える