38

ゴール：

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

問題：

私は Firefox でこれを達成でき、Chrome でもいくつかの微調整を行うことができますが、サファリと IE9 & IE10 はボールをプレーしません。

  • svg の内部コンテンツは、常にすべての画面幅で svg 要素を埋めるわけではありません
  • webkit は不思議なパディング/高さを追加します (この例では、パディングは svg 要素内にあります) SVG 要素の高さは auto で、内部の 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>
4

5 に答える 5

25

最初の問題は、.svg-wrapdiv を 100% の高さに設定していることです。何の100％？この場合、その div の親要素は body 要素です。本体の高さの 100% のブロック レベルのコンテンツと、その他の流入要素がある場合、常に垂直スクロールバーが表示されます。常に 100% +.stuffエレメントのコンテンツが存在するためです。一般的なヒントとして、このような一定のオーバーフローは、CSS で何かがおかしくなっているというヒントです。

さらに DOM に進むと、要素の高さ 100% の宣言により、高すぎるラッパーに展開することsvgが強制されます。svgそして、それは犯人の別の部分です。

私が使用するソリューションには、固有の比率が含まれます。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) スター セレクターでグローバルに使用することはできません。または、使用する場合は、svg コンテナー用にborder-boxbox-sizing をオーバーライドする必要があります。content-boxできる。

補足として、これは明らかに物事がうまくいく方法ではありません。ブラウザーは、SVG の viewBox 属性を調べて縦横比を取得し、計算された幅 (maxWidth の制限後) を計算し、高さを計算できるほどスマートでなければなりません。

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

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

SVG はまったく表示されません。変。さらに奇妙なのは、Dev Tools で宣言をオフにしてから、jsfiddle でmax-width「結果」ビューポートの幅をいじり始めることです。少し狭くしてから広くし、次に狭くしてから広くしてください。svg を小さくすると、ビューポートが大きくなってもサイズが元に戻らないことに注意してください。

次の理由から、これは重要な注意事項です。

 * {max-width:100%}

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

于 2013-07-12T20:18:26.320 に答える
9

インラインSVG 要素のデフォルトの表示タイプは ですdisplay: inline;。これは、SVG 要素がその親のタイポグラフィック ベースライン上に配置され、それに応じて配置されることを意味します。ベースラインの下には、g や j などのぶら下がっている文字を考慮して、常にいくらかのスペースがあります。

簡単な修正:svg { display: block;}またはsvg { display: inline-block; vertical-align: top; }.

于 2013-05-31T12:07:54.277 に答える
3

どのような効果を達成しようとしているのかは完全にはわかりませんが、 preserveAspectRatio ="xMinYMin slice" を探しているのではないかと思います

于 2013-06-09T23:15:11.737 に答える