2012-07-09 12 views
15

質問私はSVG要素を文字列に変換する方法を教えていただけますか?jqueryを使用しているSVGセレクタで.html()が機能しないのはなぜですか?

私はcanvgを使用して、自分のSVGをイメージに変換しています。

は、canvg()方法はSVG STRING

コード期待している最初のキャンバスに描画されなければならない。私が試みた

function updateChartImage(){ 
     canvg(document.getElementById('canvas'),expecting ` svg string`); 
     var canvas = document.getElementById("canvas") ; 
     var img = canvas.toDataURL("image/png"); 
     img = img.replace('data:image/png;base64,', ''); 
     $("#hfChartImg").val(img) ; 
     $('#img').attr({ src: img }); 
     } 

$('#container svg').html() ; // it gives me an error 
//Uncaught TypeError: Cannot call method 'replace' of undefined 

通知

その
$('#container svg') 
    $('#container').html() // both works fine and 

更新

私はインクルードiはcanvgに渡すことができますgetSVG()関数を(持っているhighcharts)を使用していますが、問題はそれが最新の更新プログラムを入手dosen'tあるので、私がしなければなりませんgetSVG()機能を実行するとき、それはこのように、私は以下の取得: enter image description here

LINK

+0

を、 "canvgはSVGパーサーとレンダラです。"。 SVGを文字列またはURL参照として既に持っている場合は、その画像をキャンバスにロードし、次に説明するキャンバスメソッドを使用して画像を抽出することができます。しかし、あなたはSVGから始める必要があります。それが図書館の目的です。 –

+0

私はhighchartsを使用していると言わなければならないと思う、私の更新を見てください –

+0

mabyがDOM準備が整うまで待ちますか? 'document.ready()' –

答えて

21

限り、私はjQueryの.html()は、HTMLのためのものですinnerHTMLを使用する呼び出すことができますよう、 svgではない。

$('svg').html(); 

とIF:あなたがあなたのSVGコンテンツを取得されていません問題についてXMLSerializer()

var svg = document.getElementById('svg_root'); // or whatever you call it 
var serializer = new XMLSerializer(); 
var str = serializer.serializeToString(svg); 
+0

私は次の[jsFiddle](http://jsfiddle.net/minagabriel/uaxZP/4/)でこれを行う方法を教えてもらえますか?それはうまくいきませんでした....ありがとうDuopixel –

+0

http:// jsfiddle.net/z8gWw/ idが不足している可能性があります – Duopixel

+1

IDなしでセレクタからDOM要素を取得するには、 'var svg = $("#container svg ")[0];'を使用します。 – Rup

0

を使用できるように、SVGののは一つだけSVGチャートがページ上にある場合は、使用
、XML文書であります現在よりも多くの人がhighcharts_containerのdivがあることを見てください。なぜなら彼らはそのsvgグラフを作成するからです。それらを使用している場合。
は、次に使用します。そのドキュメントから

$('id of that div').html(); 
関連する問題