更改 SVG 对象的多种颜色答案

【问题标题】：Change multiple colors of a SVG object更改 SVG 对象的多种颜色
【发布时间】：2014-05-28 01:19:06
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

也许对fabric.js有所了解的人会以对您的情况更有意义的方式回答，但是对于普通的旧svg，对象通常是带有事物的<g<元素（例如<rect>，@987654323 @, <ellipse>) 里面。组的每个孩子，都可以有自己的事件处理程序：

<g>
    <path onclick='handle(evt)' attrs=stuff />
    <rect onclick='handle(evt)' attrs=stuff />
    <circle onclick='handle(evt)' attrs=stuff />
</g>

点击激活的函数然后可以询问 evt.target 以查看哪些子元素收到了点击，如下所示： if (evt.target.nodeName=="path") {evt.target.setAttribute("fill","purple")}

【讨论】：

【解决方案2】：

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

【讨论】：