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

Question

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

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

どういうわけか、このコードは機能しません。助けてください、紙の背景色を設定するにはどうすればよいですか?

score 26 · Accepted Answer

実際、SVGキャンバスの背景色を設定することは完全に可能です。ここでの注意点は、Raphaelがキャンバス内のすべての要素を制御しますが、キャンバス自体を直接制御するスタイルはほとんどないということです。

幸い、Raphaelペーパーオブジェクトに関連付けられているdomノードには、canvasプロパティを介してアクセスできます。これにより、次のようなことが簡単になります。

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';

score 3 · Accepted Answer

より良い方法については以下の回答を参照してください。ただし、キャンバス領域全体を埋める長方形を作成できます。

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

2 に答える 2