一个简单的SVG绘制图片的小案例。

效果图:

代码如下:

 <style>

         * {

             padding:;

             margin:;

         }

         body {

             background-color: #d5d3d4;

         }

         .container {

             width: 500px;

             height: 500px;

             position: relative;

             top: 80px;

             left: 50%;

             transform: translate3d(-50%,0,0);

             background-color:#08c406;

             border-radius: 10px;

             box-shadow: 0 0 5px #c2bfbf;

         }

         .container object{

             position:relative;

             top:50px;

             left:50px;

         }

     </style>
<body>

    <div class="container">

        <object data="logo.svg" width="400" height="400" type="image/svg+xml" />

    </div>

</body>

这个是xml格式的代码，跟html文档分离的。

 <?xml version="1.0" standalone="no"?>

 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

 <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

     <ellipse cx="150" cy="150" rx="150" ry="110" style="fill:rgb(255,255,255);stroke:rgb(255,255,255);stroke-width:2"/>

     <circle cx="90" cy="105" r="15" style="fill:#08c406;stroke:#08c406;stroke-width:2"/>

     <circle cx="210" cy="105" r="15" style="fill:#08c406;stroke:#08c406;stroke-width:2"/>

     <polygon points="50,260 80,195 180,200" style="fill:#fff;stroke:#fff;stroke-width:1"/>

     <ellipse cx="268" cy="228" rx="125" ry="90" style="fill:#08c406;stroke:#08c406;stroke-width:2"/>

     <ellipse cx="270" cy="230" rx="125" ry="90" style="fill:rgb(255,255,255);stroke:rgb(255,255,255);stroke-width:2"/>

     <circle cx="220" cy="200" r="10" style="fill:#08c406;stroke:#08c406;stroke-width:2"/>

     <circle cx="320" cy="200" r="10" style="fill:#08c406;stroke:#08c406;stroke-width:2"/>

     <polygon points="330,260 350,320 300,300" style="fill:#fff;stroke:#fff;stroke-width:1"/>

 </svg>

html 5新特性 --用SVG绘制的微信logo的更多相关文章

  1. HTML5 十大新特性(五)——SVG绘图

    相对于canvas绘图,SVG是一种绘制矢量图的技术.全称叫做Scalable Vector Graphics,可缩放的矢量图,在2000年就已经存在,H5把它纳入了标准标签库,并进行了一些瘦身.需要 ...

  2. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...

  3. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  4. HTML5和CSS3的一些新特性

    html5有哪些新特性.移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5? 新特性: 1. 拖拽释放(Drag and drop) 2. 语义化更好的内容标 ...

  5. HTML5的新特性

    HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.footer. ...

  6. HTML5新特性及详解

    什么是HTML5:HTML5 是下一代的HTML,将成为 HTML.XHTML 以及 HTML DOM 的新标准. 为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 J ...

  7. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  8. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  9. Microsoft Tech Summit 2018 课程简述：利用 Windows 新特性开发出更好的手绘视频应用

    概述 Microsoft Tech Summit 2018 微软技术暨生态大会将于10月24日至27日在上海世博中心举行,这也会是国内举办的最后一届 Tech Summit,2019 年开始会以 Mi ...

随机推荐

  1. Project Euler 95:Amicable chains 亲和数链

    Amicable chains The proper divisors of a number are all the divisors excluding the number itself. Fo ...

  2. Intellij IDEA采用Maven+Spring MVC+Hibernate的架构搭建一个java web项目

    原文:Java web 项目搭建 Java web 项目搭建 简介 在上一节java web环境搭建中,我们配置了开发java web项目最基本的环境,现在我们将采用Spring MVC+Spring ...

  3. Entity Freamwork 6连接PostgreSql数据库

    原文 Entity Freamwork 6连接PostgreSql数据库 开发环境 VS 2015  Update 1   Postgre Sql 9.4 使用过程 1.使用Nuget在项目中添加对E ...

  4. 微信开发之——Php批量生成带参数的二维码

    带参数的二维码对于渠道营销推广来说是很有用的,可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送,可喜的是微信开通了这个接口,那下面就来研究一下吧. 具体接口说明请参见,微信公众平 ...

  5. 利用 __FUNCTION__ 宏打印函数调用信息

    __FUNCTION__ 宏表示当前所在函数名: __FILE__ 宏表示当前所在文件路径: __LING__ 宏表示当前所在行: 利用对象离开函数时调用析构函数销毁的特点,打印出函数执行结束的信息 ...

  6. *两个关键字static和final

    static关键字:可以用于修饰属性,也可以用于修饰方法,还可以用于修饰类. static 修饰属性: 无论一个类生成了多少个对象,所有这些对象共同使用唯一一份静态的成员变量:一个对象对该静态成员变量 ...

  7. shell 编程基础(1)---初识shellscript

    shellscript 是linux下强大的系统管理工具,可以通过bash命令和管道命令直接在linux系统上进行编程,所写的脚本不需要编译就可以执行,对于系统管理而言十分方便. #!/bin/bas ...

  8. hadoop拾遗（五）---- mapreduce 输出到多个文件 / 文件夹

    今天要把HBase中的部分数据转移到HDFS上,想根据时间戳来自动输出到以时间戳来命名的每个文件夹下.虽然以前也做过相似工作,但有些细节还是忘记了,所以这次写个随笔记录一下. package com. ...

  9. 【POJ】3134 Power Calculus

    1. 题目描述给定一个正整数$n$,求经过多少次乘法或除法运算可以从$x$得到$x^n$?中间结果也是可以复用的. 2. 基本思路实际结果其实非常小,肯定不会超过20.因此,可以采用IDA*算法.注意 ...

  10. [HDOJ4578]Transformation（线段树，多延迟标记）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4578 四种操作:查询.加法.乘法.改数.应该是需要维护三个lazy标记,然后就是套路了.查询是区间内所 ...