您的位置：首页 > 移动开发 > 微信开发

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

2016-02-03 13:37 961 查看
一个简单的SVG绘制图片的小案例。

效果图:



代码如下:

<style>
* {
padding: 0;
margin: 0;
}

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航