2

複雑なパンフレットをオンライン形式で再現するレスポンシブレイアウトの背景画像としてsvgを使用しています。

すべてがベクターオブジェクトに対して完全に機能しますが、svgに画像を埋め込むと、背景に表示されません。

最も奇妙なことは、svgを単独でチェックすると、画像がそこにあるので、これはちょっと面倒です！

それがsvg構成またはそのようなものと関係があるかどうか誰かが知っていますか？

これを解決し、svgを背景画像として使用できるようにするにはどうすればよいですか（background-size：coverルール！）？

ああ、この「現象」が私のMacのChromeで発生するのを見たことがあることを付け加えておきます。ブラウザ固有の場合は、そう言ってください。

問題のsvgはこれです：http：//nonstoptrip.limsomnium.com/img/fundoinfo1.svg

残念ながら、私はあまりjsfiddlerではないので、すべてを表示するものを作成できませんでした。

前もって感謝します！

4

3 に答える 3

9

ドキュメント レベルで svg を読み込むと、画像が表示されます。この要素は後で削除できますが、画像は消えません。1px x 1px 要素にロードするように設定できます...

function loadSVG(svgpath){
     if( /webkit/gi.test(navigator.userAgent.toLowerCase()) ){
       var obj = document.createElement("object");
       obj.setAttribute("type", "image/svg+xml");
       obj.setAttribute("data", svgpath);
       obj.setAttribute("width", "1");
       obj.setAttribute("height", "1");
       obj.setAttribute("style", "width: 0px; height: 0px; position: absolute;visibility : hidden");
       document.getElementsByTagName("html")[0].appendChild(obj);
     }
}

window.onload = function(){
  loadSVG("../img/mySVG.svg");
}

このテクニックの作者は Dirk Weber です。詳細はこちら: http://www.eleqtriq.com/2012/01/enhancing-css-sprites-and-background-image-with-svg/

于 2012-09-20T13:50:23.463 に答える
4

残念ながら、Webkit はこれをまだサポートしていません。https://bugs.webkit.org/show_bug.cgi?id=63548がこの問題を追跡しています。

于 2012-09-20T13:26:13.760 に答える
0

タイプ属性に「image/xml」のみを使用する@Duopixelも機能し（クロムでのみテストしました）、「リソースはドキュメントとして解釈されますが、MIMEタイプの画像/ svg + xmlで転送されます」エラー（一方、「image/svg+xml」はそうです)。これにより、コンソールで発生する可能性のある迷惑なエラーを取り除くことができます!

于 2013-05-25T19:05:14.410 に答える