[英]changing svg icon color into different color
有什么辦法可以實現這一點(見圖片),我試過用 fill="white" 但這不會給我想要的那些部分提供白色,下面的圖片更容易理解:
我現在做了什么:
我想要達到的目標:
我的代碼:
import React from "react"; function Graph() { return ( <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 64 64" > <path fill="white" d="M57 38c0-6.279-4.851-11.438-11-11.949v12.535l7.678 7.678A11.944 11.944 0 0057 38z" ></path> <path fill="white" d="M3 53c0.551.449 1 1 1h56c.551 0 1-.449 1-1V22H3zm7-2a4 4 0 110-8 4 4 0 010 8zm12 0a4 4 0 110-8 4 4 0 010 8zm23-27c7.72 0 14 6.28 14 14s-6.28 14-14 14-14-6.28-14-14 6.28-14 14-14zM5 38h1v-9h4v9h4V27h4v11h4V25h4v13h1v2H5z" ></path> <path fill="white" d="M45 50c2.693 0 5.174-.903 7.179-2.407L44.586 40H33.181c.956 5.666 5.885 10 11.819 10zM44 26.051c-6.149.511-11 5.67-11 11.949h11zM60 10H4c-.551 0-1.449-1 1v9h58v-9c0-.551-.449-1-1-1zm-50 7H6v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z" ></path> </svg> ); } export default Graph;
您可以使用反應樣式將顏色插入背景
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 64 64"
style={{ backgroundColor: "black" }}
>
<path
fill="white"
d="M57 38c0-6.279-4.851-11.438-11-11.949v12.535l7.678 7.678A11.944 11.944 0 0057 38z"
></path>
<path
fill="white"
d="M3 53c0 .551.449 1 1 1h56c.551 0 1-.449 1-1V22H3zm7-2a4 4 0 110-8 4 4 0 010 8zm12 0a4 4 0 110-8 4 4 0 010 8zm23-27c7.72 0 14 6.28 14 14s-6.28 14-14 14-14-6.28-14-14 6.28-14 14-14zM5 38h1v-9h4v9h4V27h4v11h4V25h4v13h1v2H5z"
></path>
<path
fill="white"
d="M45 50c2.693 0 5.174-.903 7.179-2.407L44.586 40H33.181c.956 5.666 5.885 10 11.819 10zM44 26.051c-6.149.511-11 5.67-11 11.949h11zM60 10H4c-.551 0-1 .449-1 1v9h58v-9c0-.551-.449-1-1-1zm-50 7H6v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z"
></path>
</svg>
我認為您的代碼段大部分都很好。 如果將所有 3 個fill="white"
更改為黑色,並設置白色背景,它將看起來像預期的那樣
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.