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实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 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
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
php支付宝APP支付功能
2020/07/29 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
JavaScript错误处理
2015/02/03 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
python简单实例训练(21~30)
2017/11/15 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python 除法保留两位小数点的方法
2018/07/16 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
大学生通用个人的自我评价
2014/02/10 职场文书
火车来了教学反思
2014/02/11 职场文书
学习雷锋倡议书
2014/04/15 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
运动会宣传语
2015/07/13 职场文书
六一儿童节致辞
2015/07/31 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang