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 选择器 基本选择器介绍
Jan 21 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 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实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
webpack4实现不同的导出类型
2019/04/09 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
python制作简单五子棋游戏
2019/06/18 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
教师应聘个人求职信
2013/12/10 职场文书
中学门卫岗位职责
2013/12/26 职场文书
优秀教师获奖感言
2014/01/31 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书