内联在 CSS 中的 SVG 在 Chrome/Edge 中有效,但在 Firefox 中无效

编码器.in.me

我有以下代码来显示图标。GitHub 图标不适用于 Firefox,但适用于 Chrome 和 Edge。奇怪的是,谷歌图标适用于所有浏览器!

.github-icon {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='#fff' d='M1664 896q0 251-146.5 451.5t-378.5 277.5q-27 5-39.5-7t-12.5-30v-211q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-121-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-86-13.5q-44 113-7 204-79 85-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-40 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 89t.5 54q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-color: dimgray;
}

.google-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='-60 -60 710.117 710.117' %3E%3Cpath fill='%23fff' fill-rule='evenodd' clip-rule='evenodd' d='M516.375,255v-76.5h-51V255h-76.5v51h76.5v76.5h51V306h76.5v-51H516.375z M320.025,341.7l-28.051-20.4%0Ac-10.2-7.649-20.399-17.85-20.399-35.7s12.75-33.15,25.5-40.8c33.15-25.5,66.3-53.55,66.3-109.65c0-53.55-33.15-84.15-51-99.45%0Ah43.35l30.6-35.7h-158.1c-112.2,0-168.3,71.4-168.3,147.9c0,58.65,45.9,122.4,127.5,122.4h20.4c-2.55,7.65-10.2,20.4-10.2,33.15%0Ac0,25.5,10.2,35.7,22.95,51c-35.7,2.55-102,10.2-150.45,40.8c-45.9,28.05-58.65,66.3-58.65,94.35%0Ac0,58.65,53.55,114.75,168.3,114.75c137.7,0,204.001-76.5,204.001-150.449C383.775,400.35,355.725,372.3,320.025,341.7z%0AM126.225,109.65c0-56.1,33.15-81.6,68.85-81.6c66.3,0,102,89.25,102,140.25c0,66.3-53.55,79.05-73.95,79.05%0AC159.375,247.35,126.225,168.3,126.225,109.65z M218.024,568.65c-84.15,0-137.7-38.25-137.7-94.351c0-56.1,51-73.95,66.3-81.6%0Ac33.15-10.2,76.5-12.75,84.15-12.75s12.75,0,17.85,0c61.2,43.35,86.7,61.2,86.7,102C335.324,530.4,286.875,568.65,218.024,568.65z%0A'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-color: red;
}
编码器.in.me

找到了。# 应替换为 %23

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

CSS中的SVG内联在FireFox中不起作用

CSS剪切路径在Firefox中有效,但在chrome中不可用

代码在Firefox Scratchpad中有效,但在代码中无效

伪元素在 Firefox 中有效,但在 Chrome 中无效,为什么?

解构错误对象在Chrome中有效,但在Firefox中无效。该怎么办?

Selenium 测试用例在 Firefox 中有效,但在 Chrome 中无效 - Headless Setup

jQuery Click 功能在 Firefox 中有效,但在 Chrome/Safari 中无效

使用 webdriver (C#) 上传文件在 Firefox 中有效,但在 IE 中无效

display:none 在 CSS 中有效,但在 jQuery 中无效

位置粘性在 Firefox 中有效,在 Chrome 中无效

元素上的過渡在 Chrome 中有效,但在 Firefox 中無效

应用于音频元素的样式在 firefox 和 safari 中有效,但在 chrome 中无效

为什么此 JavaScript css 过滤器代码在 Firefox 中有效,而在 Chrome 中无效?

'innerText'在IE中有效,但在Firefox中不可用

window.open在Firefox中有效,但在IE或Chrome中不起作用

日期构造函数在IE中返回NaN,但在Firefox和Chrome中有效

单一测试在PhantomJS中失败,但在Chrome和Firefox中有效

我的专栏文章将在Firefox / Safari中换行,但在Chrome中有效

Rmarkdown flexdashboard值框在Chrome或IE中无法正确呈现(但在FireFox中有效)

解析XML标签属性在Firefox中有效,但在Chrome中不起作用

单选按钮在谷歌浏览器中有效,但在Firefox中不起作用

Angular HTTP请求在Chrome中返回null,但在Firefox中有效

动态生成的html链接在Firefox中有效,但在Chrome中不起作用

添加的间距在Firefox中有效,但在Chrome和Safari中不起作用

日期差异在Firefox和IE中有效,但在Chrome中返回NaN

CSS 全屏背景在开发工具中有效,但在真实浏览器中无效

ASP GridView分页自定义CSS在设计视图中有效,但在浏览器中无效

orphanRemoval在PostgreSQL中有效,但在hsqldb中无效

函数在查询中有效,但在约束中无效