HTML5新特性之用SVG绘制微信logo


Posted in HTML / CSS onFebruary 03, 2016

HTML5新特新
HTML5 中的一些有趣的新特性:
1、用于绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素,比如 article、footer、header、nav、section
5、新的表单控件,比如 calendar、date、time、email、url、search
SVG绘制图片效果图:

HTML5新特性之用SVG绘制微信logo

代码如下:

复制代码
代码如下:

<style>
* {
padding: ;
margin: ;
}
body {
background-color: #ddd;
}
.container {
width: px;
height: px;
position: relative;
top: px;
left: %;
transform: translated(-%,,);
background-color:#c;
border-radius: px;
box-shadow: px #cbfbf;
}
.container object{
position:relative;
top:px;
left:px;
}
</style>
<body>
<div class="container">
<object data="logo.svg" width="" height="" type="image/svg+xml" />
</div>
</body>

这个是xml格式的代码,跟html文档分离的。
复制代码
代码如下:

<?xml version="." standalone="no"?>
<!DOCTYPE svg PUBLIC "-//WC//DTD SVG .//EN"
"http://www.w.org/Graphics/SVG/./DTD/svg.dtd">
<svg width="%" height="%" version="." xmlns="http://www.w.org//svg">
<ellipse cx="" cy="" rx="" ry="" style="fill:rgb(,,);stroke:rgb(,,);stroke-width:"/>
<circle cx="" cy="" r="" style="fill:#c;stroke:#c;stroke-width:"/>
<circle cx="" cy="" r="" style="fill:#c;stroke:#c;stroke-width:"/>
<polygon points=", , ," style="fill:#fff;stroke:#fff;stroke-width:"/>
<ellipse cx="" cy="" rx="" ry="" style="fill:#c;stroke:#c;stroke-width:"/>
<ellipse cx="" cy="" rx="" ry="" style="fill:rgb(,,);stroke:rgb(,,);stroke-width:"/>
<circle cx="" cy="" r="" style="fill:#c;stroke:#c;stroke-width:"/>
<circle cx="" cy="" r="" style="fill:#c;stroke:#c;stroke-width:"/>
<polygon points=", , ," style="fill:#fff;stroke:#fff;stroke-width:"/>
</svg>

以上所述是小编给大家分享的HTML5新特性之用SVG绘制的微信logo ,希望对大家有所帮助。

HTML / CSS 相关文章推荐
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
HTML5未来发展趋势
Feb 01 #HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 #HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 #HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 #HTML / CSS
Html5 audio标签样式的修改
Jan 28 #HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 #HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 #HTML / CSS
You might like
php adodb连接mssql解决乱码问题
2009/06/12 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
vue接口请求加密实例
2020/08/11 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
python抓取网页图片示例(python爬虫)
2014/04/27 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python实现的彩票机选器实例
2015/06/17 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python读取指定日期邮件的实例
2019/02/01 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
综合办公室个人的自我评价
2013/12/22 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
业务内勤岗位职责
2014/04/30 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python