しゅう【Webサイト制作/改良
・コーダー】
のPortfolio Site

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

UnsplashSharon Pittawayが撮影した写真
当サイトはアフィリエイト広告を利用しています

↑の投稿クリックして開くのめんどいと思うので、全文↓↓にコピー


すんげえいい勉強になった…

「buttonで画像の色を変更する方法」
指定の色の画像が、エクスポート不可で用意されてない…
SVGにしてもpathが複雑でfill一括変換できない…
↓↓
JavaScriptで条件分岐でfill書き換える?
filterで色調いじって調節する?
オンラインツールで画像加工する?

結論 「手書き(コピペ)」でSVG画像のfill直接書き換えて、欲しい色の画像自分で作っちゃう

それを、別divに入れてdisplay:none;で置き換えれば、あほほど簡単…
3時間悩んだことが、思いついたら10分でできた…
場合によっては原始的な方法が一番早いし簡単…
難しく考えすぎてました
自己満足でムズカシイ方法やるより、同じ結果が出るなら、楽な方法選んだ方がいいですね…
あほやった~~~


↑↑ここまでXの投稿コピペ

buttonに限らず、デザインカンプで、色違いの画像が用意されてなくて、

hover時なんかの色が変わった画像を、自分で用意しないといけないとき、、、

ってことです。

SVG画像でエクスポートしてやれば、メモ帳なんかのテキストエディタでひらいたら、SVGのコードそのまま見ていじれるんで、

それの、fillの部分を、自分の使いたいカラーコードに書き換えて、色違いの別画像を作る、、、

そしてそれを、display:none;なんかを使って、表示切り替える、、、

ってだけです。

気づいたら、超簡単、、、

当時、3時間溶かしました笑