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

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

效果图:

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

代码如下:

 <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>