javascript - ラファエル繰り返し背景パターン

Question

SVG要素全体の背景として、正方形の繰り返しパターン(青写真に少し似ています)が必要です。ラファエルを使用しています。どうすればこれを達成できますか?

SVGを使用してパン/ズームするので、画像ではなくSVGでこれを行いたいのですがSetViewBox、背景も適切にスケーリングしたいと思います。

Answer 1

1 つのオプションは、これらの正方形を通常の方法でレンダリングすることpaper.rect()です。ただし、コストがかかる可能性があり、キャンバスのサイズが大きくなる可能性がある場合は、メンテナンスが必要になります。

もう 1 つのオプションは、パターン化された塗りつぶしpaper.rect(0,0,100,100).attr({fill: "url(images/pattern.png)"});(このチュートリアルを参照) を行うことです。これにより、指定された画像が自動的に繰り返されます。ただし、私は自分でそれを行っていないので、実行したときにパターンがどのようにスケーリングされるかはよくわかりませんSetViewBox().