javascript - 使用可变纸张在 Raphael 中操作画布背景颜色

Question

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

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

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

Answer 1

实际上，完全可以为 SVG 画布设置背景颜色——这里需要注意的是，尽管 Raphael 控制画布内的所有元素，但它对画布本身的风格控制很少。

幸运的是，您可以通过其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");