2011-10-27 21 views
4
$.get('path/to/svg.svg', function(data) { 
    $('#my-div').html(data); 
}); 

この結果、コンソールに「HIERARCHY_REQUEST_ERR:DOM Exception 3」と表示されます。このコンセプトのすべてのバリエーションは同じことをしているようです。実際のSVGをコピーアンドペーストして "データ"をそれに置き換えると、それはちょうど良い状態になります。 .svgの書式を別にする必要がありますか、ブラウザでドキュメント内に別のドキュメントを挿入しようとしていると思わないように、最初に解析する必要がありますか?JavaScript/jQuery経由でSVGインラインを挿入するには?

答えて

0

$('#my-div').css('background-image', "path/to/svg.svg");

+0

さて、これを背景イメージとして設定し、SVG XMLをドキュメントに挿入するのは非常に異なっています。 –

+0

あなたは完全に正しいです!しかし、私たちがどのように見えるかは、あなたのケースのSVGドキュメントが、アドレスsource/processのEXTERNALファイルによってアドレスパス/ to/svg.svgによって準備されていることです。つまり、GET URLを送信するのに2ms、コンテンツを受信するのに2msを費やしました。 CSSと同じ状況:新しいURLを設定し、GET(低レベル)を送信してコンテンツを受信して​​います。 –

+0

svgをローカルコード(javascript)で、送受信手順なしで作成したい場合は、jQueryのハックを試すことができます:http://stackoverflow.com/questions/11792754/create-and-access-svg-tag-with -jquery/14985470#14985470 –

0

返されるデータの子要素を見てみてください。私の場合、最初の子はXMLノード、2番目はDOCTYPE宣言、次に3番目の子は.html()メソッドで追加できるSVGタグでした。しかし、SVGイメージは、デベロッパーツール(Chromeを使用)でコンテナにいくつかのスタイルを切り替えるまで表示されません。グーグルでやる私が何か役に立つものを見つけたら、この投稿のコメントに追加します。

+0

私はSVG要素の高さが0でした!しかし、このメソッドは、LinearGradientのsvgタグを読み込んで正しく使用する際に問題があると思われます(DOMに正しく追加されますが、fill属性で参照されても取り出されません)。もう一度私はいくつかのグーグルをするためにオフになり、それ以上の結果を返信します – steve

関連する問題