12

問題 : Snap.svgを使用していくつかの基本的なインタラクティブ グラフィックを作成していますが、何らかの理由で、.svg を使用して外部 SVG ファイルをロードできませんSnap.load()。snap.io のチュートリアルから直接コードを取得し、ドキュメントを確認して再確認しました。私の SVG ファイルはブラウザで正常にレンダリングされますが、Snap SVG 内には表示されません。他の形状 (つまり、 を使用して引き込まれないSnap.load()) は表示されます。

コード: 例を考えられる最も単純な HTML および SVG ファイルに煮詰めましたが、Snap.load() メソッドはまだ機能しません。誰かが私が見逃しているものを見ていますか?

HTML :

<head>
  <style media="screen">
            #svg {
                width: 300px;
                height: 300px;
            }
  </style>
  <script src="snap.svg-min.js"></script>
  <meta charset=utf-8 />
</head>
<body>
  <svg id="svg"></svg>
  <script type="text/javascript">
    var s = Snap("#svg");
    Snap.load("svgtest.svg");
  </script>
</body>

SVG (元は Illustrator からエクスポート) :

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<rect x="14" y="33" fill="#2BB673" width="70" height="30"/>
</svg>

更新: @Ian の提案に従ってコードを更新しました -

var s = Snap("#svg");
Snap.load("http://www.w3.org/TR/SVG/images/struct/Use01.svg", onSVGLoaded ) ;

function onSVGLoaded( data ){ 
    s.append( data );
}

- ただし、外部 SVG はまだ表示されません。ファイル自体やドメインに問題がないことを確認するために、w3.org の SVGを使用してみました。

4

4 に答える 4

23

読み込みには時間がかかるため、load 関数はコールバックを受け取ります。だから私はあなたが次のようなことをするだろうと思う...

var s = Snap("#svg");
Snap.load("svgtest.svg", onSVGLoaded ) ;

function onSVGLoaded( data ){ 
    s.append( data );
}

編集: スクリプトと同じサーバーからアクセスしない場合、アクセス制御の問題が発生する可能性があります。コンソール ログでエラーを確認してください。

于 2013-11-12T10:25:31.960 に答える
5

私は Internet Explorer でのみこの問題を抱えていましたが、それは、読み込んでいた SVG ファイルが、doctype が削除された縮小版であったことが原因であることが判明しました。他のブラウザは Doctype がなくても問題ありませんでしたが、Doctype をそのままにしておくと IE でも問題が解決しました。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

私のように、Grunt を使用して SVG を縮小している場合は、Gruntfile に次のオプションを追加して、doctype をそのままにしておくことができます。

svgmin: {
    options: {
        plugins: [
            { removeDoctype: false }
        ]
    }
    // etc...
}
于 2014-06-02T15:13:21.890 に答える