content: url('data:image/svg+xml;utf8,<svg t="1703747805789" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5167" width="16" height="16"><path d="M854.016 739.328l-313.344-309.248-313.344 309.248q-14.336 14.336-32.768 21.504t-37.376 7.168-36.864-7.168-32.256-21.504q-29.696-28.672-29.696-68.608t29.696-68.608l376.832-373.76q14.336-14.336 34.304-22.528t40.448-9.216 39.424 5.12 31.232 20.48l382.976 379.904q28.672 28.672 28.672 68.608t-28.672 68.608q-14.336 14.336-32.768 21.504t-37.376 7.168-36.864-7.168-32.256-21.504z" fill="%230B7041" p-id="5168" ></path></svg>');
不能按照传统的
fill="#000000"
要按照
fill="%23000000"
%23的意义不知道,后面的6位可以表示颜色
扩充:svg图片代码data:image/svg+xml转png图片方法
<img id="test" src="data:image/svg+xml;
utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 555 344' width='555'
height='344'%3E%3Cpath
fill='%23000000'
fill-opacity='1'
d='M33.7 33.8v-7.5c0-8.2-3.8-11.7-8.1-11.7-6.7 0-8.9 3.5-8.9'
%3E%3C/path%3E%3C/svg%3E">
————————————————
版权声明:本文为CSDN博主「viqecel」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/viqecel/article/details/132871836
也可能上面的不生效可以用這種
content: url('data:image/svg+xml;charset=utf-8,%3Csvg t="1706073100131" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1740" width="20" height="20"%3E%3Cpath d="M398.499 236.5l274.256 274.256-274.256 274.256z" fill="%23272636" p-id="1741"%3E%3C/path%3E%3C/svg%3E');