How can I fill a polygon with a texture using svg?

Question

I'm currently using svg.js - but I am very welcome to alternative suggestions - is there any way I can create a polygon and then apply a repeating texture to it?

Below is an example of what I am attempting to achieve. Here is a jsFiddle which shows my best attempt. This works, but the image doesn't repeat so if you increase the size of the polygon the effect is lost.

我正在创建一个图像,然后是两个多边形.一个用于形状,另一个用于阴影.然后我用多边形掩盖图像.

image.maskWith(polygon.fill({color: '#FFF'}));

我们的想法是,不是创建许多不同形状,彩色和纹理的PNG,我们将能够创建一个纹理并使用svg.js来调整其他所有内容.

提前致谢 :)

Answer 1

这就是<pattern>SVG中的元素.Mozilla文档.