今天小编跟大家讲解下有关HTML5新特性之用SVG绘制微信logo ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5新特性之用SVG绘制微信logo 的相关资料，希望小伙伴们看了有所帮助。
HTML5新特新 HTML5 中的一些有趣的新特性： 1、用于绘画的 canvas 元素 2、用于媒介回放的 video 和 audio 元素 3、对本地离线存储的更好的支持 4、新的特殊内容元素 比如 article、footer、header、nav、section 5、新的表单控件 比如 calendar、date、time、email、url、search SVG绘制图片效果图:
代码如下: 复制代码代码如下:<style> * { padding: ; margin: ; } body { background-color: #ddd; } .container { width: px; height: px; position: relative; top: px; left: %; transform: translated(-%,,); background-color:#c; border-radius: px; box-shadow: px #cbfbf; } .container object{ position:relative; top:px; left:px; } </style> <body> <div class="container"> <object data="logo.svg"width=""height=""type="image/svg+xml"/> </div> </body> 这个是xml格式的代码 跟html文档分离的。 复制代码代码如下:<?xml version="."standalone="no"?> <!DOCTYPE svg PUBLIC"-//WC//DTD SVG .//EN""http://www.w.org/Graphics/SVG/./DTD/svg.dtd"> <svg width="%"height="%"version="."xmlns="http://www.w.org//svg"> <ellipse cx=""cy=""rx=""ry=""style="fill:rgb(,,);stroke:rgb(,,);stroke-width:"/> <circle cx=""cy=""r=""style="fill:#c;stroke:#c;stroke-width:"/> <circle cx=""cy=""r=""style="fill:#c;stroke:#c;stroke-width:"/> <polygon points=", , ,"style="fill:#fff;stroke:#fff;stroke-width:"/> <ellipse cx=""cy=""rx=""ry=""style="fill:#c;stroke:#c;stroke-width:"/> <ellipse cx=""cy=""rx=""ry=""style="fill:rgb(,,);stroke:rgb(,,);stroke-width:"/> <circle cx=""cy=""r=""style="fill:#c;stroke:#c;stroke-width:"/> <circle cx=""cy=""r=""style="fill:#c;stroke:#c;stroke-width:"/> <polygon points=", , ,"style="fill:#fff;stroke:#fff;stroke-width:"/> </svg>
以上所述是小编给大家分享的HTML5新特性之用SVG绘制的微信logo 希望对大家有所帮助。
来源：爱蒂网
