124

Google chrome が要素で svg をレンダリングしないという問題がありimgます。これは、ページの更新時と最初のページの読み込み時に発生します。「要素の検査」で画像を表示し、svg ファイルを右クリックして新しいタブで svg ファイルを開くことができます。svg 画像は元のページにレンダリングされます。

<img src="../images/Aged-Brass.svg">

問題が何であるかについて、ここで完全に途方に暮れています。svg 画像は IE9 と FF で正常にレンダリングされますが、Chrome や Safari ではレンダリングされません。

MIME タイプも設定しています。(画像/svg+xml)

編集: これは、私の問題を説明するために作成した単純な html ページです。

<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>

    <style>
        #BackgroundImage{
            background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
            width: 400px;
            height: 600px;
        }

        #image_element {
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="image_element">
        <img src="../images/Aged-Brass.svg">
    </div>
    <div id="BackgroundImage"></div>
</body>
</html>

ご覧のとおり、img要素と css の両方で背景画像として svg ファイルを使用しようとしています。chrome または safari での最初のページ読み込みではどちらも機能しません。要素を検査すると、svg を右クリックするか、別のウィンドウで svg ロードへのリンクをクリックすると、svg ファイルが元のタブにレンダリングされます。

4

26 に答える 26

30

私は同じ問題を抱えていたのでここに来ました.要素を調べるとファイルを見ることができますが、サイトでは見ることができません(ローカルホストを使用している場合でも)

私の問題に対する答えは、SVG ファイルを保存することでした。イラストレーターから保存した場合は、「リンク」ではなく「埋め込み」をクリックしてください。リンクはデータを含めるのではなく、ローカルファイルを参照するだけです（私が正しく理解している場合）。 ここに画像の説明を入力

http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html _

これは私にとってはうまくいきました。

于 2014-11-11T10:52:15.723 に答える
5

私も同じ問題を抱えていました。受け入れられ、ヘッダー「Content-Type」、「image/svg+xml」に設定されたファイルタイプを確認したところ、この問題は解決しました。

response.setHeader("Content-Type", "image/svg+xml");
于 2021-03-19T11:35:04.437 に答える