码迷,mamicode.com
首页 > 微信 > 详细

html 5新特性 --用SVG绘制的微信logo

时间:2016-02-03 14:29:01      阅读:442      评论:0      收藏:0      [点我收藏+]

标签:

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

效果图:

技术分享

 

代码如下:

 1 <style>
 2         * {
 3             padding: 0;
 4             margin: 0;
 5         }
 6 
 7         body {
 8             background-color: #d5d3d4;
 9         }
10 
11         .container {
12             width: 500px;
13             height: 500px;
14             position: relative;
15             top: 80px;
16             left: 50%;
17             transform: translate3d(-50%,0,0);
18             background-color:#08c406;
19             border-radius: 10px;
20             box-shadow: 0 0 5px #c2bfbf;
21         }
22         .container object{
23             position:relative;
24             top:50px;
25             left:50px;
26         }
27     </style>

 

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

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

 1 <?xml version="1.0" standalone="no"?>
 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 
 5 <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 6     <ellipse cx="150" cy="150" rx="150" ry="110" style="fill:rgb(255,255,255);stroke:rgb(255,255,255);stroke-width:2"/>
 7     <circle cx="90" cy="105" r="15" style="fill:#08c406;stroke:#08c406;stroke-width:2"/>
 8     <circle cx="210" cy="105" r="15" style="fill:#08c406;stroke:#08c406;stroke-width:2"/>
 9     <polygon points="50,260 80,195 180,200" style="fill:#fff;stroke:#fff;stroke-width:1"/>
10 
11     <ellipse cx="268" cy="228" rx="125" ry="90" style="fill:#08c406;stroke:#08c406;stroke-width:2"/>
12     <ellipse cx="270" cy="230" rx="125" ry="90" style="fill:rgb(255,255,255);stroke:rgb(255,255,255);stroke-width:2"/>
13     <circle cx="220" cy="200" r="10" style="fill:#08c406;stroke:#08c406;stroke-width:2"/>
14     <circle cx="320" cy="200" r="10" style="fill:#08c406;stroke:#08c406;stroke-width:2"/>
15     <polygon points="330,260 350,320 300,300" style="fill:#fff;stroke:#fff;stroke-width:1"/>
16 </svg>

 

html 5新特性 --用SVG绘制的微信logo

标签:

原文地址:http://www.cnblogs.com/younth/p/5179512.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!