12

私は何か間違ったことをしているに違いない。画像はイラストレーターからSVGとしてエクスポートされ、（これが適切かどうかはわかりませんが）ピクセルデータが含まれています。 これが私のJSFiddleの例です。

画像に直接アクセスすると、問題なく表示されることに注意してください：http://ykcreations.com/tv.svg

編集：これはChromeまたはSafariでは機能しませんが、Firefoxでは機能します。Webkitの問題？

4

4 に答える 4

9

ソース SVG に問題があります。正しく動作する別の SVG ファイルを指しているこの更新された Fiddle を参照してください: http://jsfiddle.net/wdW2K/2/

.tv {
  background: url("http://phrogz.net/svg/800x800.svg");
  width: 400px; height: 400px;
}​

編集: 具体的には、 WebKit が背景として使用される SVGをサポートしていないことが問題のようです。<image>ファイルを最小限に変更し<image>てローカル (非データ URI) ファイルを参照するように変更し、を追加すると<circle/>、Chrome で SVG を直接表示すると画像と円の両方が表示されましたが、背景画像としてのみ使用した場合は丸が見えた。

このバグは関連性のあるにおいがします。

于 2012-07-17T20:38:37.110 に答える
2

それはあなたのイメージに関係しています。あなたのに以下をプラグインしてみてくださいCSS：

.tv
{
    background-image: url("http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg");
    width: 400px;
    height: 400px;
}​

おそらくあなたSVGは実際にはSVGZ? SVGZファイルはファイルの圧縮バージョンSVGです。通常、それを処理するようにサーバーを構成する必要がありますが、FF は圧縮されたバージョンを処理できる場合があります。

EDIT 以下の Phrogz の回答を参照してください (これを読んだ時点で上記の可能性があります)。これをカバーし、より良い説明を提供します。

于 2012-07-17T20:38:14.183 に答える
1

別の考えられる原因は、間違った MIME タイプで SVG を提供していることです。「image/svg+xml」に設定すると、問題が解決する場合があります。

Rails では、config/initializers/mime_types.rb に以下を追加することでこれを行うことができます:

Mime::Type.register 'image/svg+xml', :svg

于 2016-05-20T23:52:12.133 に答える