背景图像 (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>