javascript - 如何使用 svg 用纹理填充多边形？

Question

我目前正在使用svg.js - 但我非常欢迎其他建议 - 有什么方法可以创建一个多边形，然后对其应用重复纹理？

下面是我试图实现的一个例子。这是一个 jsFiddle，它展示了我的最佳尝试。这可行，但图像不会重复，因此如果您增加多边形的大小，效果就会丢失。

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

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

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

提前致谢：）

带纹理的多边形示例

score 9 · Accepted Answer

9

这就是<pattern>SVG 中的元素的用途。Mozilla 文档。

于 2013-09-25T17:27:41.783 回答

score 2 · Accepted Answer

Svg.js有一个模式插件。用法很简单：

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

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

我只需要提到 Opera 中的图案有时会呈现黑色。我仍然需要找出原因。

更新：

最新版本的svg.js (1.0.0-rc.4) 支持直接使用图像 url 或图像实例进行填充：

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

2 回答 2