使用 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==");


 


声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
763 文章
4 教程
8 项目
随机推荐
Node.js 安装
WordPress 文章页作者信息 get_the_author() 和 get_the_author_meta()
Node.js zlib 模块
数据库中间表应该如何命名
JavaScript 私有方法和私有属性
WordPress 插入文章函数 wp_insert_post()
AIBOT 插件
JavaScript 代码混淆加密工具 javascript-obfuscator