可変紙を使用してRaphaelのキャンバスの背景色を操作する

Question

背景色を特定の色に設定したい。私は次のコードを使用します：

//JavaScript Code 
var paper = Raphael(200, 350, 320, 200); 
paper.attr("fill", "#f00"); 

どういうわけか、このコードは機能しません。どうすれば紙の背景色を設定できますか？

Answer 1

は、より良い方法については、以下の回答を参照してください、しかし、あなたは全体のキャンバス領域を塗りつぶし四角形を行うことができます。

var paper = Raphael(200, 350, 320, 200); 
var rect = paper.rect(0, 0, 320, 200); 
rect.attr("fill", "#f00"); 
rect.attr("stroke", "#f00"); 

Answer 2

実は、SVGキャンバスの背景色を設定することが完全に可能です - Raphaelはキャンバス内のすべての要素をコントロールしていますが、キャンバス自体の上にスタイルコントロールをほとんど提供していません。

幸いなことに、キャンバスプロパティを使用してRaphael紙オブジェクトに関連付けられたDOMノードにアクセスできます。つまり、このようなことを行うことが容易になります：

var paper = Raphael(200, 350, 320, 200); 
paper.canvas.style.backgroundColor = '#F00'; 

良い

まだ、あなたのアプリケーションのスタイルシートの一部としてあなたのキャンバスの背景/ボーダー/パディングを定義することができ、その後、念のキャンバスは、適切なを使用するように設定されていることを確認しますスタイル：

var paper = Raphael(200, 350, 320, 200); 
paper.canvas.className += ' my_svg_class';