使用 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
Jone
在什么样的花园里面,挖呀挖呀挖
种什么样的种子,开什么样的花
随机推荐
WordPress 支持事务
Node.js 实现 RBAC 权限模型
WordPress 按自定义排序的两种方法
WordPress 上传附件
WordPress RESTful API 路由代码结构
MySQL 表名预处理
Linux 网络流量监控 iftop
WordPress 插件开发
WordPress 添加自定义接口
数据库中间表应该如何命名

微信联系我

夜间模式切换
回到顶部