نحوه نمایش رنگی تصاویر png سفید با کد رنگ دلخواه

خب مشکل من از جایی شروع شد که قرار شد یک لیست از تصاویر png (که همه سفید هستند) به همراه کد رنگ هاشون از API بگیرم و به صورت آیکون های رنگی نمایش بدم.

که البته اگر از حالت روز در ویرگول استفاده کنید این عکس رو نخواهید دید چون بک گراند سفیده و عکس هم سفیده و من بک گراند عکس رو تغییر ندادم تا کاملا متوجه مشکل بشوید.

خلاصه بعداز کلی کلنجار رفتن با css خیلی کلافه شده بودم و فقط تونسته بودم با

filter: opacity(0.5) drop-shadow(0 0 0 #ff0000);

یک مقدار رنگ به آیکون هام بدم اما اصلا قابل قبول نبود. مثلا کد بالا که رنگ عکس رو باید قرمز کنه تبدیل به عکس پایین می کنه:

همونطور که ملاحضه می کنید تقریبا قرمز شده اما جالب و قابل قبول نیست.

وپس از کلی سرچ و امتحان کردن روش های مختلف و فیلترهای مختلف به راهکار استفاده از svg رسیدم که دقیقا همون چیزی بود که من نیاز داشتم به تکه کد پایین دقت کنید.

<svg width=&quot40&quot height=&quot40&quot viewBox=&quot0 0 40 40&quot>
    <defs>
        <filter id=&quotprefix__a17&quot>
            <feFlood flood-color=&quot#ff0000&quot result=&quotflood&quot></feFlood>
            <feComposite in=&quotSourceGraphic&quot in2=&quotflood&quot operator=&quotarithmetic&quot k1=&quot1&quot> 
           </feComposite>
        </filter>
    </defs>
    <image width=&quot100%&quot height=&quot100%&quot xlink:href=&quothttps://link/to&quot filter=&quoturl(#prefix__a17)&quot type=&quotimage&quot>
    </image>
</svg>

باید دقت کنید که حتما باید id تگ filter با مقدار پراپرتی filter در image یکسان باشد و باید کد رنگ مورد نظر خودمون رو به پراپرتی flood-color در تگ feFlood تخصیص بدیم.

که در نهایت نتیجه کد بالا به صورت عکس پایین نمایش داده می شود.

همونطور که مشاهده می کنید تصویر دقیقا رنگ مورد نظر رو نمایش داده و این دقیقا همون آیکون مد نظر من هست.

در انتها تشکر میکنم که این پست رو مطالعه کردید و اگر راه بهتری به نظرتون رسید بهم اطلاع بدید.