svg - SVGへのRaphael.jsパス

Question

ウィキペディアでSVG画像を見たことがあります。メモ帳で開いて、その中に書かれているコードを見つけることができます。私の質問は、ラファエルで円を作成した場合、それをブラウザにsvg画像として表示できますか？

var p = paper.circle(10,10,10).attr({fill:'blue'});

次に、それをブラウザにsvg画像として表示します。どうすればそれを達成できますか？

Answer 1

これは、SVGをサポートするブラウザーでのみ機能します。IE9でもサポートが提供されていないため、失敗すると思います.serializeToString()（ただし、これにはシムがあります）。

window.onload = function () {
  var paper = Raphael("container", 100, 100);
  var p = paper.circle(10,10,10).attr({fill:'blue'});
  var textarea = document.getElementById("code")
  var serializer = new XMLSerializer();
  textarea.value = serializer.serializeToString(paper.canvas);
};​

こちらのデモをご覧ください：http：//jsfiddle.net/BvWkU/

Answer 2

window.onload = function () {
  var paper = Raphael("container", 100, 100);
  var p = paper.circle(10,10,10).attr({fill:'blue'});
  var textarea = document.getElementById("code")
  var serializer = new XMLSerializer();
  textarea.value = serializer.serializeToString(paper.canvas);
};​