html 5新特性用SVG绘制的微信logo_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

html 5新特性用SVG绘制的微信logo_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:27 AM

一个简单的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>

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn