1

次のシナリオで、Safari は svg を出力するサイズをどのように決定しますか。

SVG コード

 viewBox 0 0 800 800
 height 100%
 width 100%

CSS

 svg width 100%
 containing div width 60%

Safari は、画面の 60% よりもはるかに小さい svg を出力します。これはバグです。しかし、この小さな svg のサイズを決定するものは、私が考えることができるものとは何の関係もありません。

背景情報を提供するだけです。Safari は、必要なことを行うために、px 単位の幅と高さの両方を必要とします。% 動作しません。しかし、それは svg を出力するので、そのサイズについてどこかで決定を下す必要があります。

4

1 に答える 1

2

あなたが見ているのはバグではありません。それが正しい振る舞いです。デフォルトでは、ブラウザーは SVGビューボックス(用語に注意してください。ブラウザーのビューポートについて話しているわけではありません) をスケーリングして、CSS によって決定された SVG 要素の寸法を埋めます。塗りつぶしの動作は、SVG preserveAspectRatio属性によって決定されます。デフォルトでは に設定されmeetており、SVG 全体を表示可能にし、縦横比を維持します。別の方法としてslice、トリミングを意味する場合でも、要素をカバーするためにビューボックスを拡大します。( CSS3sliceと同様に動作します。)background-size:cover

あなたがする必要があるのは：

a) SVG ファイルで高さや幅を明示的に宣言しないでください。グラフィックエディタがそれらを生成している場合は、手動で削除してください。仕様によると、幅と高さが指定されていない場合、100% の値が想定されるため、疑似コードはせいぜい冗長です。

b) CSS で svg 要素の明示的な高さを設定していることを確認します。Chrome 18 Dev Tools にはバグが修正されているため、レスポンシブ svg サイズのトラブルシューティングには Chrome の開発者ビルドまたは Canary ビルドをお勧めします。Chrome で動作するようになれば、ほぼ確実に Safari でも動作します。

c) preserveAspectRatio を設定する方法を理解し、手動で svg を編集して宣言に入れます。

それでも問題が解決しない場合は、jsfiddle を投稿してください。他の人がコメントするのははるかに簡単です。

于 2012-05-29T18:30:43.077 に答える