Javascript Fabricjs：用图像模式填充svg

我想加载我的SVG文件，并用从图像文件创建的模式填充它

以下是我目前的做法：

canvas = new fabric.Canvas('mainCanvas')
# image = new fabric.Image(img[0])
# console.log image
fabric.loadSVGFromURL '/assets/my.svg',
  (objects) ->
    fabric.util.loadImage "url/to/my/image", (image) ->
      console.log image
      svg = fabric.util.groupSVGElements(objects)
      svg = svg.scale(0.04).set(fill: "black", opacity: 0.5 )
      svg.fill = new fabric.Pattern
        source: image
        repeat: "no-repeat"
      canvas.add(svg)
      canvas.renderAll()

最初，我尝试使用fabric.Image实例（img是jQuery Image元素，所以我将原始htmlelement传递给构造函数），但为了确保&使用与我使用loadImage方法更相似的代码

---

不幸的是，这段代码似乎不起作用（svg已加载，但上面没有模式）。可以用模式填充svg吗？如果是这样，我如何实现它？

问题可能是SVG形状被解析为

fabric.PathGroup

而不是

fabric.Path

。由于

fabric.PathGroup

由多个

fabric.Path

对象组成，您需要设置它们的填充值，而不是PathGroup实例本身的填充值

if (obj instanceof fabric.PathGroup) {
  obj.getObjects().forEach(function(o) { o.fill = pattern; });
}
else {
  obj.fill = pattern;
}

如果您转到并使用“Patternify”按钮，您可以看到它适用于更复杂的形状（这正是我们在那里使用的代码）：

---

问题可能是SVG形状被解析为

fabric.PathGroup

而不是

fabric.Path

。由于

fabric.PathGroup

由多个

fabric.Path

对象组成，您需要设置它们的填充值，而不是PathGroup实例本身的填充值

if (obj instanceof fabric.PathGroup) {
  obj.getObjects().forEach(function(o) { o.fill = pattern; });
}
else {
  obj.fill = pattern;
}

如果您转到并使用“Patternify”按钮，您可以看到它适用于更复杂的形状（这正是我们在那里使用的代码）：

---

您好，谢谢您的评论，不幸的是，事实并非如此。这是我当前的代码：–仍然不起作用。有什么不对劲吗？看起来您是在为“填充”属性指定图像，而不是图案。@user1105595有帮助吗？很抱歉，我之前没有响应，但您完全正确！我在那段代码上看了无数次，检查出了什么问题，但我没有发现那个错误。非常感谢你！嗨，谢谢你的评论，不幸的是，事实并非如此。这是我当前的代码：–仍然不起作用。有什么不对劲吗？看起来您是在为“填充”属性指定图像，而不是图案。@user1105595有帮助吗？很抱歉，我之前没有响应，但您完全正确！我在那段代码上看了无数次，检查出了什么问题，但我没有发现那个错误。非常感谢你！