如何在fabric js中更改SVG图像的颜色？

【问题标题】：How to change the color of SVG image in fabric js?如何在fabric js中更改SVG图像的颜色？
【发布时间】：2013-09-15 02:42:03
【问题描述】：

我的 Canvas 中有一个 SVG 图像对象（即 car.svg），是否可以更改该 SVG 图像对象的颜色。如何在织物 js 中做到这一点？

喜欢这个网站：birds color change

如果可以像这个网站一样改变图像颜色：http://dalidecals.com/Classic-Family-Name-Personalized-Monogram-Wall-Decals-Stickers-Custom.html .任何想法如何在fabric js中做到这一点。

【问题讨论】：

如果您正在处理fabric.Path，则需要设置对象的fill 值。或者如果您正在处理 fabric.PathGroup，则为所有子对象的 fill 值。

标签： php jquery html5-canvas fabricjs

【解决方案1】：

最近我使用了一种织物 js 过滤器来改变颜色，如果 T 恤或杯子和...，命名为 混合颜色，效果很好。但是当我尝试它不适用于 svg 图像时，我将它用于 png 和 jpg ...... 这是我在 javascript 中的代码：

fabric.Image.fromURL(require("../../assets/mockup/100.png"), (img) => {
  canvas.add(img);
  img.scaleToWidth(canvas.getWidth());
  img.scaleToHeight(canvas.getHeight()); var filter = new fabric.Image.filters.BlendColor({
    color: newColor,
    mode: "multiply",
  });
  this.$store.state.mockup.currentImg.filters = [];
  this.$store.state.mockup.currentImg.filters.push(filter);
  this.$store.state.mockup.currentImg.applyFilters();
  this.$store.state.mockup.canvas.renderAll();

这是fabric js库中的参考：

Class: BlendColor

【讨论】：