背景色を特定の色に設定したい。私は次のコードを使用します:可変紙を使用してRaphaelのキャンバスの背景色を操作する
//JavaScript Code
var paper = Raphael(200, 350, 320, 200);
paper.attr("fill", "#f00");
どういうわけか、このコードは機能しません。どうすれば紙の背景色を設定できますか?
背景色を特定の色に設定したい。私は次のコードを使用します:可変紙を使用してRaphaelのキャンバスの背景色を操作する
//JavaScript Code
var paper = Raphael(200, 350, 320, 200);
paper.attr("fill", "#f00");
どういうわけか、このコードは機能しません。どうすれば紙の背景色を設定できますか?
は、より良い方法については、以下の回答を参照してください、しかし、あなたは全体のキャンバス領域を塗りつぶし四角形を行うことができます。
var paper = Raphael(200, 350, 320, 200);
var rect = paper.rect(0, 0, 320, 200);
rect.attr("fill", "#f00");
rect.attr("stroke", "#f00");
実は、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';
+1は、VMLモードとSVG(IE8とIE7の両方)で完全に機能します。 ** http://jsbin.com/uYilUqe/2/edit**奇妙なことに、 '.className'メソッドは最新のChromeやFirefox(IE9とIE10)では動作しませんが、動作しますIE7とIE8で私は以前のIEでは何かを見たことがありませんでしたが、以前は標準ブラウザではありませんでした。 – user568458
@ user568458私は同じ問題がありましたが、現代のブラウザでも '' baseVal''フィールドを設定することで回避できます。 '' paper.canvas.className.baseVal + = "my_svg_class" '' – easuter