画像の色違い欲しけりゃ、SVGで書き出して自分で作っちゃえ!【超簡単】

UnsplashのSharon Pittawayが撮影した写真
当サイトはアフィリエイト広告を利用しています↑の投稿クリックして開くのめんどいと思うので、全文↓↓にコピー
すんげえいい勉強になった…
「buttonで画像の色を変更する方法」
指定の色の画像が、エクスポート不可で用意されてない…
SVGにしてもpathが複雑でfill一括変換できない…
↓↓
JavaScriptで条件分岐でfill書き換える?
filterで色調いじって調節する?
オンラインツールで画像加工する?
結論 「手書き(コピペ)」でSVG画像のfill直接書き換えて、欲しい色の画像自分で作っちゃう
それを、別divに入れてdisplay:none;で置き換えれば、あほほど簡単…
3時間悩んだことが、思いついたら10分でできた…
場合によっては原始的な方法が一番早いし簡単…
難しく考えすぎてました
自己満足でムズカシイ方法やるより、同じ結果が出るなら、楽な方法選んだ方がいいですね…
あほやった~~~
↑↑ここまでXの投稿コピペ
buttonに限らず、デザインカンプで、色違いの画像が用意されてなくて、
hover時なんかの色が変わった画像を、自分で用意しないといけないとき、、、
ってことです。
SVG画像でエクスポートしてやれば、メモ帳なんかのテキストエディタでひらいたら、SVGのコードそのまま見ていじれるんで、
それの、fillの部分を、自分の使いたいカラーコードに書き換えて、色違いの別画像を作る、、、
そしてそれを、display:none;なんかを使って、表示切り替える、、、
ってだけです。
気づいたら、超簡単、、、
当時、3時間溶かしました笑