如何使用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

回答