背景圖像 (image/svg+xml) 在轉換為 base64 時停止顯示

Question

我的表格有一個復選框 SVG，如下所示；

 .check-nobase64 { background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-.001 21c0-11.598 9.402-21 21-21s21 9.402 21 21-9.402 21-21 21-21-9.402-21-21zM19.8 29.99l12.092-15.115-2.186-1.75L19.398 26.01l-7.303-6.086-1.792 2.151L19.8 29.99z' fill='%231675BB'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover; width: 28px; height: 28px; margin: 0 auto; }

 <div class="check-nobase64"></div>

當我啟用 Cloudflare 緩存時，它會自動將其轉換為 base64 並破壞它；

 .check-base64 { background-image: url(data:image/svg+xml;base64,PHN2Z1wgd2lkdGg9XCc0MlwnXCBoZWlnaHQ9XCc0MlwnXCBmaWxsPVwnbm9uZVwnXCB4bWxucz1cJ2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCc+PHBhdGhcIGZpbGwtcnVsZT1cJ2V2ZW5vZGRcJ1wgY2xpcC1ydWxlPVwnZXZlbm9kZFwnXCBkPVwnTS0uMDAxXCAyMWMwLTExLjU5OFwgOS40MDItMjFcIDIxLTIxczIxXCA5LjQwMlwgMjFcIDIxLTkuNDAyXCAyMS0yMVwgMjEtMjEtOS40MDItMjEtMjF6TTE5LjhcIDI5Ljk5bDEyLjA5Mi0xNS4xMTUtMi4xODYtMS43NUwxOS4zOThcIDI2LjAxbC03LjMwMy02LjA4Ni0xLjc5MlwgMi4xNTFMMTkuOFwgMjkuOTl6XCdcIGZpbGw9XCcjMTY3NUJCXCcvPjwvc3ZnPg==); background-repeat: no-repeat; background-size: cover; width: 28px; height: 28px; margin: 0 auto; }

 <div class="check-base64">

當我解碼base64時，原始數據從這里變成；

%3Csvg width='42' height='42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-.001 21c0-11.598 9.402-21 21-21s21 9.402 21 21-9.402 21-21 21-21-9.402-21-21zM19.8 29.99l12.092-15.115-2.186-1.75L19.398 26.01l-7.303-6.086-1.792 2.151L19.8 29.99z' fill='%231675BB'/%3E%3C/svg%3E"

對此；

<svg\ width=\'42\'\ height=\'42\'\ fill=\'none\'\ xmlns=\'http://www.w3.org/2000/svg\'><path\ fill-rule=\'evenodd\'\ clip-rule=\'evenodd\'\ d=\'M-.001\ 21c0-11.598\ 9.402-21\ 21-21s21\ 9.402\ 21\ 21-9.402\ 21-21\ 21-21-9.402-21-21zM19.8\ 29.99l12.092-15.115-2.186-1.75L19.398\ 26.01l-7.303-6.086-1.792\ 2.151L19.8\ 29.99z\'\ fill=\'#1675BB\'/></svg>

似乎當 Cloudflare 將其轉換為 base64 時，URL 編碼部分會中斷。 我找不到合適的解決方案，並感謝任何擺脫這個問題的建議

編輯：我注意到主要問題是#填充部分。 當我手動將#更改為%23時，它開始以解碼的 base64 出現。

Answer 1

將您的 SVG 文件轉換為 base64，但需要像源常規 SVG 文件一樣。 這\'導致錯誤的編碼。

將此轉換為 Base64：

<svg width="42" height="42" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M-.001 21c0-11.598 9.402-21 21-21s21 9.402 21 21-9.402 21-21 21-21-9.402-21-21zM19.8 29.99l12.092-15.115-2.186-1.75L19.398 26.01l-7.303-6.086-1.792 2.151L19.8 29.99z" fill="#1675BB"/></svg>

不是這個：

<svg\ width=\'42\'\ height=\'42\'\ fill=\'none\'\ xmlns=\'http://www.w3.org/2000/svg\'><path\ fill-rule=\'evenodd\'\ clip-rule=\'evenodd\'\ d=\'M-.001\ 21c0-11.598\ 9.402-21\ 21-21s21\ 9.402\ 21\ 21-9.402\ 21-21\ 21-21-9.402-21-21zM19.8\ 29.99l12.092-15.115-2.186-1.75L19.398\ 26.01l-7.303-6.086-1.792\ 2.151L19.8\ 29.99z\'\ fill=\'#1675BB\'/></svg>

 .check-base64, .check-nobase64 { background-repeat: no-repeat; background-size: cover; width: 28px; height: 28px; margin: 0 auto; } .check-nobase64 { background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-.001 21c0-11.598 9.402-21 21-21s21 9.402 21 21-9.402 21-21 21-21-9.402-21-21zM19.8 29.99l12.092-15.115-2.186-1.75L19.398 26.01l-7.303-6.086-1.792 2.151L19.8 29.99z' fill='%231675BB'/%3E%3C/svg%3E"); } .check-base64 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA0MiA0MiI+PHBhdGggZmlsbD0iIzE2NzVCQiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAyMWEyMSAyMSAwIDEgMSA0MiAwIDIxIDIxIDAgMCAxLTQyIDB6bTE5LjggOSAxMi0xNS4xLTItMS44LTEwLjQgMTMtNy4zLTYuMi0xLjggMi4yIDkuNSA3Ljl6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4="); } .wrapper { display: flex; align-items: center; flex-direction: column; } .wrapper p { margin-bottom: .5rem; }

 <div class="wrapper"> <p>No base64 approach:</p> <div class="check-nobase64"></div> </div> <div class="wrapper"> <p>Base64 approach:</p> <div class="check-base64"></div> </div>