svg をサポートしていないデバイス用のフォールバック png を含む svg バックグラウンドがあります。背景色もつけてみました。IE8 を含むすべてのデスクトップ ブラウザーで動作します。しかし、iOS にはありません。(現在、チェックするAndroidはありません)
iOS で。svg、png、または png と background-color または svg と background color で動作します。しかし、それは3つ一緒に動作しません。
問題は、これらすべてをまとめる方法です:
- iOS (および Android)
- 背景色
- svg
- png フォールバック
ここで回答を確認してください: http://jsfiddle.net/TtWhH/
(例として、パブリック URL にある可能性のある img を使用します)
HTML:
<div id="grafic"></div>
CSS:
#grafic{
position:relative;
margin:0 auto;
width:512px; height:512px;
max-width:980px;
background-color:yellow;
background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Badge.svg');
background-image:none,url('http://www.w3.org/html/logo/downloads/HTML5_Badge.svg'), url('http://www.w3.org/html/logo/downloads/HTML5_Badge_512.png');
background-repeat:no-repeat;
background-position:left top;
}