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

body { background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1060px' height='580px' viewBox='0 0 1060 580' preserveAspectRatio='xMidYMid meet' ><rect id='svgEditorBackground' x='0' y='0' width='1060' height='580' style='fill: none; stroke: none;'/><rect x='115' y='111' stroke='black' id='e1_rectangle' style='stroke-width: 1px;' width='144' height='120' fill='khaki'/><polyline stroke='black' stroke-width='1' id='e2_polyline' style='fill: none;' points='115 109 187 69 257 109' /><text fill='black' x='257' y='33' id='e4_texte' style='font-family: Arial; font-size: 20px;'></text><rect x='179' y='19' stroke='black' id='e5_rectangle' style='stroke-width: 1px;' width='16' height='54' fill='khaki' /></svg>");
}

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

body { background-image:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTA2MHB4IiBoZWlnaHQ9IjU4MHB4IiB2aWV3Qm94PSIwIDAgIDEwNjAgNTgwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiA+PHJlY3QgaWQ9InN2Z0VkaXRvckJhY2tncm91bmQiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDYwIiBoZWlnaHQ9IjU4MCIgc3R5bGU9ImZpbGw6IG5vbmU7IHN0cm9rZTogbm9uZTsiLz48cmVjdCB4PSIxMTUiIHk9IjExMSIgc3Ryb2tlPSJibGFjayIgaWQ9ImUxX3JlY3RhbmdsZSIgc3R5bGU9InN0cm9rZS13aWR0aDogMXB4OyIgd2lkdGg9IjE0NCIgaGVpZ2h0PSIxMjAiIGZpbGw9ImtoYWtpIi8+PHBvbHlsaW5lIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMSIgaWQ9ImUyX3BvbHlsaW5lIiBzdHlsZT0iZmlsbDogbm9uZTsiIHBvaW50cz0iMTE1IDEwOSAxODcgNjkgMjU3IDEwOSIgLz48dGV4dCBmaWxsPSJibGFjayIgeD0iMjU3IiB5PSIzMyIgaWQ9ImU0X3RleHRlIiBzdHlsZT0iZm9udC1mYW1pbHk6IEFyaWFsOyBmb250LXNpemU6IDIwcHg7Ij48L3RleHQ+PHJlY3QgeD0iMTc5IiB5PSIxOSIgc3Ryb2tlPSJibGFjayIgaWQ9ImU1X3JlY3RhbmdsZSIgc3R5bGU9InN0cm9rZS13aWR0aDogMXB4OyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjU0IiBmaWxsPSJraGFraSIgLz48L3N2Zz4=");

3.

background-repeat:no-repeat; background-size:contain; background-position:center;

用绘制SVG

http://www.drawsvg.org/drawsvg.html

转载于:https://www.cnblogs.com/GameEngine/p/7497070.html

用SVG做background image相关推荐

  1. 使用SVG做网页背景

    使用重复的SVG图案(SVG Patterns)作为网页的背景,与传统的CSS相比有很多优点.本文介绍SVG制作网页背景的优势,并简要概括方法.相关资源和浏览器支持情况. SVG上手教程: SVG上手 ...

  2. css svg做动图,用SVG制作酷炫动态图标的方法

    用SVG制作酷炫动态图标的方法 发布时间:2020-09-14 14:56:39 来源:亿速云 阅读:160 作者:小新 用SVG制作酷炫动态图标的方法?这个问题可能是我们日常学习或工作经常见到的.希 ...

  3. css3 使用SVG做0.5px 的边框细线

    .HalfPixelLine{background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http:/ ...

  4. svg做自定义折线图表

    设计稿: 做好的效果图:(细节自己慢慢调整) 源码: <!DOCTYPE html> <html lang="en"> <head><me ...

  5. css svg做动图,用svg动态绘制图形

    以此前对svg的了解,就是通过rect/circle/line--等绘制规则图形,或者利用path路径来绘制更复杂的图形.但是这种绘制是,当我们写好svg的xml文件嵌入html代码,页面载入的时候, ...

  6. html可以用坐标画svg图吗,HTML5如何使用SVG的方法示例

    代码优化永远是程序员亘古不变的需求,而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环,既然是优化,那我们先来看看SVG图片都有哪些优势: SVG 可被非常多的工具读取和 ...

  7. svg实现水滴相融效果

    svg实现水滴相融效果 近来看见一个用svg做的菜单动画,对svg来了兴趣,研究了其中涉及的水滴粘合效果.这里贴上菜单动画链接 先看看效果 <!DOCTYPE html> <html ...

  8. 如何用svg画一个骚气的名字

    1. 前言 前端实现动画 即使很炫的那种,说白了 各种 @keyframe a b c d 组合加上自己的创意,也不是很难,直到有一天看到一个 像蚯蚓一样 描边的 动画,感觉挺不错,后来发现是svg ...

  9. 案例+图解带你一文读懂SVG

    资料链接 案例+图解带你一文读懂SVG (2.6W+字) 简介 SVG 是 Scalable Vector Graphics 的缩写,意为可缩放矢量图形.于 2003年1月14日 SVG 1.1 被S ...

最新文章

  1. 卷积Groups Group Convolutions
  2. 【Accelerated C++】重点回顾(续)
  3. java 高飞_高飞(土木与水利工程学院)老师 - 合肥工业大学
  4. software engineering homework, product analysis
  5. 小红书CTO山丘:用户隐私保护是数据应用的第一前提
  6. eclipse 版本 查看
  7. /var/spool/clientmqueue/下的大文件
  8. java 日志框架 详解_springboot日志详解
  9. kettle官方使用文档地址
  10. 计算机u盘设备无法启动不了,系统提示“该设备无法启动(代码:10)”,USB设备不能开始工作怎么办?...
  11. Android 修改zxing二维码样式
  12. 物流基础知识(十八)
  13. golang并发资源的竞争
  14. 2020年总结:平安辞旧岁,老牛自奋蹄!
  15. 心跳PING PONG用法
  16. 谈谈PHP中的trait
  17. 三星270E5K-X0D黑苹果安装教程
  18. 在乐视2手机上解决kindle阅读器即译时音标显示正常的问题
  19. 【Adobe 】Adobe Photoshop2022特别版推荐
  20. SNMP Informant How-To

热门文章

  1. 上海python培训中心
  2. Error while building/deploying project untitled (kit: Desktop Qt 5.5.1 MinGW 32bit)
  3. python删除word空白页的代码
  4. jQuery 效果 - 淡入淡出fadeIn()、fadeOut、fadeTo、fadeToggle()示例
  5. Mysql插入生僻字报错
  6. 软件项目管理(一) 课程代码:01336
  7. ThinkPad T430 开机ThinkVantage指纹软件自启动
  8. 关于SecureCRT的注册错误问题
  9. VirtualBox 桥接网卡设置
  10. 用XFire发布WebService