拉斐尔重复背景图案

Question

我希望有一个重复的正方形图案（有点像蓝图）作为整个SVG元素的背景。我正在使用拉斐尔。我怎么能做到这一点？

我希望使用SVG而不是图像来执行此操作，因为我使用SetViewBox平移/缩放SVG，我希望背景也适当缩放。

Answer 1

一种选择是通过paper.rect()以常规方式渲染这些方块。但是，可能价格昂贵，如果帆布尺寸增大，可能需要一些维护。

另一个选项是进行图案填充，paper.rect(0,0,100,100).attr({fill: "url(images/pattern.png)"});（请参阅this tutorial），它应自动重复给定的图像。不过，我自己并没有这样做，所以当你SetViewBox()时，我不确定该模式是如何缩放的。