用SVG做background image
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
用SVG做background image的更多相关文章
- 动态修改svg的颜色,svg做背景色时候修改颜色
svg修改背景色可以使用fill属性来修改,但是我现在需要动态改变svg的颜色,例如我hover的时候 现在发现一种兼容性还不错的方法是css属性mask 类似于给路径填充上颜色,结合backgrou ...
- css3 使用SVG做0.5px 的边框细线
.HalfPixelLine{ background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http: ...
- 一步步用svg做一个声波扩散动画
有个项目需要在某个坐标显示一个声波扩散(不知道这个表达对不对)的动画. 这种需求一般做法有几种,一种做成gif图片,然后贴上去,一种是用html+css3完成,要么就是画上去,这画又分两种,一种是Ca ...
- 用svg做流程管理
说起流程管理这个功能,如果没有个动态图配合显示,简直就是太没有客户体验感了.就比如说请假流程吧,流程走到哪一步了,流程走向过程中都那些人审批的,审批的结果等等,如果就来个列表,也不是说不行,就是觉得太 ...
- SVG制作可爱小页面
很久都没有在博客园上发表一些自己学的新东西了,只是在有空的时候逛一逛博客园而已,看来我不是一个真正的程序员,哈哈! 但是今天非常想和大家分享一个小东西,那是前两天在一个网页上看到了这个东西 我好奇中间 ...
- svg image标签降级技术
1.svg image标签降级技术: svg不能很好的在anroid2.3中得到支持,需要额外的补充,IE8-以及Android 2.3默认浏览器是不支持SVG的. svg image标签降级技术,这 ...
- 转载 | SVG向下兼容优雅降级方法
本文引自:http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/ 1.svg image标签降级技术 <svg width=&quo ...
- js操作svg整体缩放
首先我们先创建一个svg整体布局,代码如下: <!DOCTYPE html> <html> <head> <title>js操作svg实现整体缩放< ...
- 有意思!强大的 SVG 滤镜
想写一篇关于 SVG 滤镜的文章已久,SVG 滤镜的存在,让本来就非常强大的 CSS 如虎添翼.让仅仅使用 CSS/HTML/SVG 创作的效果更上一层楼.题图为袁川老师使用 SVG 滤镜实现的云彩效 ...
随机推荐
- 【软件安装与环境配置】TX2安装配置caffe过程
Tx2刷机 sudo sh ./caffe_dependency.sh 注意python的版本问题. 问题 LD -o .build_release/lib/libcaffe.so. /usr/bin ...
- Matlab中的rectangle函数
rectangle函数功能:创建二维矩形对象. rectangle('Position',[x,y,w,h])从点(x,y)开始绘制一个宽w高h的矩形,对坐标轴数据单元指定值.注意,按指定的比例显示矩 ...
- MySQL-8.0.11与Navicat Premium安装教程
1. 下载MySQL 下载地址: https:////dev.mysql.com/downloads/mysql/ 百度云 链接:https://pan.baidu.com/s/1bxAtnvChZZ ...
- Java.net.SocketException: Unrecognized Windows Sockets error: 0: JVM_Bind异常
端口被占用,可能是其他程序占用,也有可能是自己代码逻辑不对,比如BZ在写SocketServer时把添加端口的代码放进了while里(sasasa.....). 查看本机端口是否被占用:netstat ...
- DashBoard创建各种表(二)
添加范围过滤器 “ 范围过滤器”允许您将过滤应用于其他仪表板项.此项目显示带有选择拇指的图表,允许您过滤掉沿参数轴显示的值. 如图,可以根据选择不同的CategorySales范围显示图表1的内容了. ...
- 时间Date.js
<span style="line-height: 25.2px;">/** * 日期解析,字符串转日期 * @param dateString 可以为2017-02- ...
- STL标准模板类
STL,中文名标准模板库,是一套C++的标准模板类(是类!),包含一些模板类和函数,提供常用的算法和数据结构. STL分为:迭代器,容器,适配器,算法以及函数对象. --迭代器是一种检查容器内元素并遍 ...
- 入学java的第一天
登录http://www.oracle.com,下载JDK(J2SE) JDK 1.0,1.1,1.2,1.3,1.4 1.5(JDK5.0) 支持注解.支持泛型 1.6(JDK6.0)Server2 ...
- MongoDB4.0 WINDOWS环境下 副本集、分片部署
部署开始: 创建路径 D:\Program Files\MongoDB\MySet下 config Data log 文件夹 config文件夹下准备配置文件: 分片1的副本集1 storage: d ...
- MySQL必知必会第十一章-
使用数据处理函数 大多数SQL支持以下类型的函数: 1> 文本函数:用于处理文本串(删除或填充值,转换值为大写或小写) 2> 数值函数:用于在数值数据上进行算术操作(返回绝对值,进行代数运 ...