Safariはどのようにsvgオブジェクトのサイズを計算しますか？

Question

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

SVGコード

viewBox 0 0 800 800 
height 100% 
width 100% 

CSS

svg width 100% 
containing div width 60% 

SafariはOK、これはバグであり、スクリーンの60％よりもはるかに小さいSVGを出力します。しかし、この小さなSVGのサイズを決定するものは、私が考えることのできるものとは関係がありません。

背景情報を入力するだけです。 Safariは幅と高さの両方が必要です。 ％don-t仕事。しかし、それはsvgを出力するので、そのサイズのどこかで決定を下す必要があります。

Answer 1

あなたが見ているバグではありません。それは正しい動作です。デフォルトでブラウザはSVG ビューボックスをスケールします（現在の用語に注意してください、ブラウザについてはビューポート）がSVG要素のCSSで決定された寸法を満たすようにします。塗りつぶしの振る舞いは、SVG preserveAspectRatio属性によって決まります。デフォルトではmeetに設定されており、SVG全体を表示可能にし、アスペクト比を保持します。代替は、sliceです。これは、クロップを意味する場合でも、要素をカバーするようにビューボックスを拡大/縮小します。 （sliceはCSS3でbackground-size:coverと同じように動作します。）

何をする必要がある：

a）はSVGファイルに明示的な高さや幅を宣言しないでください。グラフィックスエディタでそれらを生成している場合は、手作業で取り込んで削除してください。 specによれば、幅と高さが指定されていない場合、100％の値が仮定されるため、擬似コードは最高で冗長です。

b）CSSのsvg要素の明示的な高さを設定していることを確認してください。 Chrome 18 Dev Toolsにはbugが存在するため、応答性の高いサイズ変更のトラブルシューティングのために、Chromeの開発者用またはCanaryビルドをお勧めします。 Chromeで動作させると、ほぼ確実にSafariでも動作します。

c）preserveAspectRatioをどのように設定し、svgを手作業で編集して宣言に入れるかを解説します。

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