Question

我使用fabric.js将一个SVG徽标渲染到画布上，原始SVG全部为黑色但我需要用户能够更改徽标的每个不同部分的颜色，从而生成一个对象多种颜色，例如：

wikimediauruguay.org/images/5/53/Wikimedia-logo.png

我怎样才能做到这一点？如果我只使用object.setFill（）它会改变整个对象的颜色，但我需要将每个部分的颜色分别更改为用户选择的颜色。感谢。

编辑：找到了解决方案，刚刚在下面发布了我的答案，以防其他人有同样的问题。

Answer 1

也许知道fabric.js的人会以对你的情况更有意义的方式回答，但对于普通的svg，对象通常是带有事物的<g<元素（如{{1} }，<rect>，<path>）里面。该组的每个子级都可以拥有自己的事件处理程序：

<ellipse>

然后，点击激活的功能可以询问evt.target以查看哪些子元素收到了点击，如下所示： if（evt.target.nodeName ==“path”）{evt.target.setAttribute（“fill”，“purple”）}

Answer 2

以一种非常简单的方式解决mi问题：我只需要在Illustrator上编辑SVG，以便徽标的每个不同颜色部分都在不同的层上，然后当我通过fabric.loadSVGFromURL（）加载SVG时layer.js会将图层视为不同的对象，然后我就可以单独编辑每个对象（图层）（setFill（）等）。