web-dev-qa-db-ja.com

Snap.load（）外部SVGがロードに失敗する

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

[〜＃〜] code [〜＃〜]：例を、考えられる最も単純なHTMLファイルとSVGファイル、およびスナップに要約しました。 .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>

[〜＃〜] update [〜＃〜]：@ 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 を使用してみましたが、ファイル自体またはドメインに問題がないことを確認するためです。

javascriptsvgsnap.svg
12
Marcatectura

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

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

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

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

23
Ian

私はInternetExplorerでのみこの問題を抱えていましたが、ロードした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...
}
5
Nick F

ディストリビューションには小さなバグがあります https://github.com/Adobe-webplatform/Snap.svg/issues/196 を参照してください。推奨される修正は正しく機能します。オンラインデモは、ライブラリのはるかに古いビルドを参照しているため、機能します。

0
Tom

バージョン0.5.1がインストールされている。上記の正解のコードを機能させるには、次のように書き直す必要があります。

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

function onSVGLoaded( data ){ 
    s.append( data );
}
0
Altaf Aali