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 22 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 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得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
jquery easyui使用心得
2014/07/07 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
记录Django开发心得
2014/07/16 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python cs架构实现简单文件传输
2020/03/20 Python
Python如何对XML 解析
2020/06/28 Python
餐饮营销方案
2014/02/23 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
千与千寻观后感
2015/06/04 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
Fluentd搭建日志收集服务
2022/09/23 Servers