suchen

Heim >Web-Frontend >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:281246Durchsuche

一个简单的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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：绝对定位对margin外边距的影响_html/css_WEB-ITnoseNächster Artikel：css实现的当鼠标悬浮弹出说明层效果_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen