☰

レスポンシブ INLINE SVG - SVG のコンテンツは親の幅を満たす必要があります 質問する

tag-icon • tag-icon html svg responsive-design
レスポンシブ INLINE SVG - SVG のコンテンツは親の幅を満たす必要があります 質問する

ゴール：

INLINE SVG親要素の利用可能な全幅を埋める要素を取得しようとしています。 svg ファイルを参照するimgandobjectタグを使用して同じ効果を簡単に実現できますが、JavaScript を使用して svg 内部要素をアニメーション化しているため、 を使用したいと考えていますinline svg。

問題：

Firefox ではこれを実現でき、Chrome でも少し調整すれば実現できますが、Safari と IE9 および IE10 ではうまくいきません。

  • SVGの内部コンテンツは、すべての画面幅でSVG要素を埋め尽くすとは限りません。
  • Webkit は謎のパディング/高さを追加します (この例では、パディングは SVG 要素内にあります)。SVG 要素の高さは自動で、内部の SVG コンテンツをラップする必要があります。

主な質問:

レスポンシブな INLINE SVG 用のクロスブラウザソリューションはありますか?IE9 および 10 と -webkit-Safari で例を表示し、SVG 要素 (シアン色) 内に不要な余分な高さがあることに注意してください。

http://jsfiddle.net/David_Knowles/9tUAd/

<div class="block">stuff</div> 
<div class="wrap">
    <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 550 350" xml:space="preserve" preserveAspectRatio="xMinYMin meet">

        <rect x="0" y="0" width="550" height="350"/>
        <polyline points="0,0 0,350 550,350"/>
        <text x="0" y="50%" fill="#ffffff" stroke="none" width="100%">The text</text>
    </svg>
</div>
<div class="block">stuff</div>

ベストアンサー1

最初の問題は、div を 100% の高さに設定していることです.svg-wrap。何の 100% でしょうか? この場合、その div の親要素は body 要素です。body の高さの 100% のブロック レベル コンテンツとその他のインフロー要素がある場合、常に垂直スクロール バーが表示されます。常に 100% +.stuff要素のコンテンツがあるためです。一般的なヒントとして、このようなオーバーフローが常に発生する場合は、CSS に問題があることを示すヒントになります。

DOM をさらに詳しく見ていくと、svg要素の高さを 100% に宣言するとsvg、過度に高いラッパーまで拡張されてしまいます。これが原因のもう 1 つの部分です。

私が使っている解決策は内在比率. CSSは次のようになります:

.svg-wrap {
    background-color:red;
    height:0;
    padding-top:63.63%; /* 350px/550px */
    position: relative;
}

svg {
    background-color: cyan;
    height: 100%;
    display:block;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
}

http://jsfiddle.net/pcEjd/

最新の FF、Chrome、Safari でテスト済み (ただし IE ではありません)。

このアプローチの欠点は次のとおりです。

a) すべてのボックスの比率を事前に計算するか、それを実行するスクリプトを作成する必要があります。それほど悪くはありません。

b) スターセレクターをグローバルに使用することはできませんborder-box。使用する場合は、SVG コンテナーのボックスサイズをオーバーライドする必要がありますcontent-box。実行可能です。

補足ですが、これは明らかに想定された動作ではありません。ブラウザは、SVG viewBox 属性を参照して比率を取得し、computedwidth (maxWidth 制限後) を計算してから、height を計算できるほど賢くなければなりません。

しかし、現在はそのようには機能しません。Chrome には別の奇妙なバグがあり、max-width:100%svg に追加すると、svg が常に最小のレンダリング サイズにサイズ調整される状況が発生します。Chrome で次のフィドルを読み込んでみてください。

http://jsfiddle.net/ynmey/1/

すると、SVG がまったく表示されなくなります。奇妙ですね。さらに奇妙なことに、max-width開発ツールで宣言をオフにしてから、jsfiddle で「結果」ビューポートの幅を操作してみましょう。幅を少しずつ狭くしたり、広くしたり、狭くしたり、広くしたりします。SVG が小さくなると、ビューポートが大きくなってもサイズが元に戻らないことに注意してください。

これは次の理由で重要です:

 * {max-width:100%}

は一般的な（そして完全に正当な）レスポンシブ デザイン アプローチですが、現在 Blink の SVG に大混乱を引き起こしています。そのため、今のところは固有の比率に固執してください。

おすすめ記事