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 相关文章推荐
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
使用CSS连接数据库的方式
Feb 28 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
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
openlayers实现地图测距测面
2020/09/25 Javascript
vue实现选中效果
2020/10/07 Javascript
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
办理信用卡收入证明范例
2014/09/13 职场文书
公司委托书格式范文
2014/10/09 职场文书
财务负责人岗位职责
2015/02/03 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers