如何使用svg填充具有纹理的多边形？

我目前使用的是svg.js - 但我非常欢迎其他建议 - 有什么方法可以创建多边形，然后对其应用重复纹理？如何使用svg填充具有纹理的多边形？

下面是我试图实现的一个例子。 Here is a jsFiddle这表明我最好的尝试。这是有效的，但图像不会重复，所以如果增加多边形的大小，效果就会丢失。

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

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

的想法是，而不是创建许多不同形状，着色，纹理，我们将PNG的能够创造一个质感和使用svg.js调整一切。

感谢提前:)

Example of polygon with texture

2013-09-25 will

阅读文档后：http：//documentup.com/wout/svg.js。我认为用js方法是不可能的。而我没有用CSS解决方案..也许在循环中添加模式图像。 –

我也很好地看了一遍，很好 - 你知道任何其他有能力的图书馆吗？ – will

当我使用SVG工作时，我使用Illustrator创建了SVG文件，并使用了代中创建的标签。 –

这是在SVG的<pattern>元素是。 Mozilla documentation.

2013-09-25 17:27:41

Svg.js有pattern plugin。用法很简单：

var pattern = draw.pattern(20, 20, function(add) { 
    add.image(20, 20) 
}) 

var circle = draw.circle(200).fill(pattern)

我只需要提一下Opera中的模式有时会呈现黑色。我仍然需要找出原因。

UPDATE：

的svg.js（1.0.0-rc.4）的最新版本支持直接的填充与图像的URL或图像实例：

var circle = draw.circle(200).fill('/path/to/image.jpg')

2014-01-28 15:00:04 wout

回答