如何使用 svg 用纹理填充多边形？答案

【问题标题】：How can I fill a polygon with a texture using svg?如何使用 svg 用纹理填充多边形？
【发布时间】：2013-09-25 15:00:55
【问题描述】：

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

以下是我尝试实现的示例。 Here is a jsFiddle 这显示了我的最佳尝试。这可行，但图像不会重复，因此如果增加多边形的大小，效果就会丢失。

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

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

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

提前致谢:)

【问题讨论】：

阅读文档后：documentup.com/wout/svg.js。我认为用js方法是不可能的。而且我还没有 CSS 解决方案。也许在循环中添加图案图像。
我也仔细看了一下，嗯——你知道其他有能力的库吗？
使用 SVG 时，我使用 illustrator 创建 SVG 文件，然后使用生成的标签。
问题在于这些内容区域可以是任意高度，使用在 Illustrator 中创建的 SVG 并将其应用为背景图像会拉伸所有内容，包括阴影和纹理。
我知道这很老了，但你看过 Raphael (en.wikipedia.org/wiki/Rapha%C3%ABl_%28JavaScript_library%29) 吗？它将 javascript 命令转换为 SVG 并具有填充命令。

【解决方案1】：

这就是 SVG 中的 <pattern> 元素的用途。 Mozilla documentation.

【讨论】：

【解决方案2】：

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

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')

【讨论】：