javascript - 如何更改复合 svg 对象的颜色

Question

我有一个带有阴影和高光的复合 svg 对象。有没有办法改变对象的颜色而不必指定对阴影和突出显示的更改？

我尝试使用灰度底层 svg 和顶部的 svg，我可以在其中更改填充和不透明度，但生成的颜色看起来很平。

有没有这样做的图书馆？

Answer 1

我创建了一个算法来循环遍历灰度 svg 的路径，其中路径按阴影（ta，Inkscape）排序，并更改阴影以创建我的彩色图像。

有关有用信息，请参阅此处的着色阴影和rgbToHex 。

效果很好。但现在我发现要获得“漂亮”的图像，我有 150kb 的 svg 文件（60 个着色路径，每个路径大约 10kb，2 个路径花费 36kb）。不太好，尤其是原始 png 只有 21kb。但谷歌搜索后，似乎移动应用程序大小高达 2gb 是可以的。这意味着我的，即使使用大 png 文件，也可能在 10mb 左右倾斜，应该没问题。