使用 svg 作为背景图片 - JavaScript 编程网

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

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。

真诚赞赏，手留余香

赞赏