一个简单的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>
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
760
收藏
