search

Home >Web Front-end >HTML Tutorial >html 5新特性 用SVG绘制的微信logo_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:27:281242browse

一个简单的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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：绝对定位对margin外边距的影响_html/css_WEB-ITnoseNext article：css实现的当鼠标悬浮弹出说明层效果_html/css_WEB-ITnose

Related articles

See more