javascript - 複合SVGオブジェクトの色を変更する方法

Question

シェーディングとハイライトを備えた複合svgオブジェクトがあります。シェーディングとハイライトの変更も指定せずにオブジェクトの色を変更する方法はありますか？

下にあるグレースケールのsvgと上部のsvgを使用してみましたが、塗りつぶしと不透明度を変更できますが、結果の色はフラットに見えます。

これを行うライブラリはありますか？

Answer 1

グレースケールsvgのパスをループするアルゴリズムを作成しました。パスはシェード（ta、Inkscape）で順序付けられており、シェードを変更してカラー画像を作成しました。

有用な情報については、ここでシェードとrgbToHexの色付けを参照してください。

それはうまくいきました。しかし今、「素敵な」画像を取得するために、150kbのsvgファイルがあることがわかりました（シェーディング用に60パス、パスあたり約10kb、2パスのコストは36kb）。特に元のpngは21kbしかなかったので、あまり良くありません。しかし、グーグルした後、2GBまでのモバイルアプリのサイズは問題ないようです。つまり、私のものは、おそらく大きなpngファイルでも約10 MBでスケールを傾けても、問題ないはずです。