通过使用可变纸操纵拉斐尔的画布背景颜色

Question

我想将背景颜色设置为特定颜色。我使用以下代码：

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

不知何故，这段代码不起作用。请帮忙，我该如何设置纸张的背景颜色？

Answer 1

实际上，完全可以设置SVG画布的背景颜色 - 这里需要注意的是，虽然Raphael控制画布中的所有元素，但它直接在画布本身上提供了很少的风格控制。 / p>

幸运的是，您可以通过其 canvas 属性访问与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';

Answer 2

请参阅下面的答案以获得更好的方法，但您可以创建一个填充整个画布区域的矩形：

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