使用 svg 作为背景图片

1 用utf8格式, 需要 双引号“”替换为单引号,而且采用url encode编码,例如# 替换为 %23,

background-image: url('data:image/svg+xml;utf8,<svg t="1656040038219" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3009" width="200" height="200"><path d="M512 234.666667c131.946667 ...67 77.482667 0 1 0 0 154.944 77.482667 77.482667 0 0 0 0-154.944z" p-id="3010" fill="%23bfbfbf"></path></svg>');


2 用base64格式, 把<svg>... </svg> 用btoa() 转换为base64编码

background-image:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTA2MHB4IiBoZWlnaHQ9IjU4MHB4IiB2aWV3Qm94PSIwIDAgIDEw==");


 


真诚赞赏,手留余香
赞赏
JavaScript,Node.js,前端
JavaScript console 的用法
2022-06-23
操作系统
Linux apt 命令
2022-06-27
ngtwewy
随机推荐
Node.js 18.x 开始支持内置单元测试
数据库中间表应该如何命名
macOS 生成 icns 图标
MySQL 表名预处理
MySQL 字符串截取函数 SUBSTRING_INDEX
Vue3 挂载全局方法
CSS 滚动条样式修改
ReferenceError: __dirname is not defined in ES module scope
使用 MySQL 线程池对压力测试的影响
Linux apt 命令

微信联系我

夜间模式切换
回到顶部