web-dev-qa-db-ja.com

CSSバックグラウンドでのSVG

編集：

クライアントブラウザーがSVGをCSSバックグラウンドとして表示できるかどうかをphpで検出するにはどうすればよいですか？

スタイルシートの名前を.cssから.css.phpに変更しました。したがって、最初に含めることができます：

<?php
header("content-type: text/css");
?>

そして途中のどこか

<?php
 if (stristr($_SERVER["HTTP_ACCEPT"], "image/xml+svg"))
 {
 }
 else
 {
 }
?>

残念ながら、私のfirefoxクライアントはimage/xml+svg文字列をサーバーに送信しません。したがって、ブラウザがSVGをphpのCSS背景として表示できるかどうかをどのように検出できますか？

参照： http://www.gabis-bloghaeuschen.de/2006/03/27/php-code-in-der-css-datei/

編集を終了します。

私が経験した（最近のいくつかのWebブラウザーを除く）他のWebブラウザーの多くは、url（）を使用して.cssを使用して.svgイメージを表示できません。

Embedタグとそのpluginspage属性を使用すると、クライアントが見つからないプラグインを参照する可能性があります。

<embed src="/svg/simple-example-1.jsp"
       width="300" height="220"
       type="image/svg+xml"
       pluginspage="http://www.Adobe.com/svg/viewer/install/" />

Adobeプラグインは古いため、corel svgビューアも参照できます。

古いブラウザに対処するための最良の戦略は何ですか？ .svgイメージが.css内に含まれている場合、プラグインを参照するメカニズムはありますか？

編集：

#header {
 width: 760px;
 height: 288px;
 margin: 0 auto;
 background: url(images/background.svg) no-repeat right top;
}

上記のコードを処理できないブラウザを、少なくともサードパーティの支援に照会する方法。プラグイン？ （または.pngかもしれませんが、実際には、それは私が望むものではありません。）

スタイルシートでsvgを処理できないブラウザに対処する他の可能性はありますか？

Iceweaselはbackground.svgを直接表示できますが、スタイルに含まれている場合は画像を表示できません-したがって、svg、スタイルシート内からではありませんか？

私が気づいたブラウザショットでは、スケーラブルベクターグラフィックスとスタイルシートにあるため、ほとんどのブラウザは画像をスタイルシートに表示していませんでした。質問は、svgでできるだけ多くの視聴者にリーチし、緊急時にのみラスター画像を使用するための最良の戦略は何ですか？

参照： http://tutorials.jenkov.com/svg/displaying-svg-in-web-browsers.html

cssimagespluginreferrersvg
5
panny

背景は背景であることが意図されています。相互作用をサポートすることを意図したものではありません。

あなたのオプションは次のように思われます：

1. CSSではなくHTMLで行います。

2.サーバーがUser-Agent文字列に従って異なるコンテンツを返すようにします。

3. SVGが長方形で不透明な場合は、次のようにフォールバックを実行できます

background-image: url(fallback.png);
background-image: none, url(real.svg), url(fallback.png);

4. v4より前のFirefoxおよびv9より前のIEは忘れてください。 （ ref ）

5. Modernizrを使用し、SVGバックグラウンドのサポートのプロキシとしてinlinesvgを使用します。 （注：これには2つのバージョンのサイトは必要ありません。JS依存関係とCSSの追加行だけです）。

6.より複雑なフォールバックを提供するためにJavaScriptを使用するいくつかのアプローチがあります。

4
Peter Taylor