今天是圣诞节，无意中看到csdn博客上面给我的头像带了个圣诞帽，比较好奇，想看看csdn是怎么实现的，果然用的是svg实现，不过代码有点冗长。

<html>

<body>

    <svg id="csdnc-memberhead" width="24" height="24" style="display: inline;">

        <path fill="#E40012" d="M.645 18.267l2.008-6.723 2.08-4.238L7.44 2.978l1.177-.993L14.032.406l2.9.293 1.515 1.455 2.24 4.331-1.6.572-1.589-2.271-.864-.412-1.274 1.742 5.634 8.82z"></path>

        <path fill="#EA6362" d="M8.617 1.985L13.356.186 16.961 0l.733.406 1.869 1.666 2.541 4.413-1.509-.106-2.289-4.091L16.592.812l-2.577.146z"></path><path fill="#6E0002" d="M10.354 3.243l3.953 2.076 1.061 2.166 1.7 2.459 1.658 3.031-1.501 1.565 3.987 3.147 2.163.58-1.664-2.633.64-1.489-1.567-2.179-.718-.645-.975-1.52-1.129-.948-1.358-2.87.03-1.609-.734-.336-3.714-1.036z"></path>

        <path fill="#FFF" d="M19.941 8.065l-1.987-1.282-.431-2.396 1.375-2.107 2.379-.583 1.987 1.282.43 2.396-1.376 2.108z"></path>

        <defs>

            <path id="a" d="M19.941 8.065l-1.987-1.282-.431-2.396 1.375-2.107 2.379-.583 1.987 1.282.43 2.396-1.376 2.108z"></path>

        </defs>

        <clipPath id="b">

            <use xlink:href="#a" overflow="visible"></use>

        </clipPath>

        <path clip-path="url(#b)" fill="#E7E7E8" d="M19.714 1.667l1.721.667L23.066 4.9s3.345 2.231 3.363 2.097c.019-.136-.98-5.429-.98-5.429l-2.914-2.642-2.76 1.33-.061 1.411z"></path>

        <g>

            <defs>

                <path id="c" d="M19.941 8.065l-1.987-1.282-.431-2.396 1.375-2.107 2.379-.583 1.987 1.282.43 2.396-1.376 2.108z"></path>

            </defs>

            <clipPath id="d">

                <use xlink:href="#c" overflow="visible"></use>

            </clipPath>

            <path clip-path="url(#d)" fill="#BEBFBF" d="M17.289 3.09l1.686 1.68.286 1.586.831.537 1.575-.387.798-1.219 1.693-2.597 1.454.965s.651 2.423.474 2.64c-.179.218-1.437 2.837-2.119 3.354-.687.518-5.6 1.827-5.6 1.827l-4.93-1.766 3.852-6.62z"></path>

        </g>

        <path fill="#EA6362" d="M8.435 2.301L5.294 7.45l-2.629 4.519-.53 3.708.458 1.563 1.068.935-1.889-.388h-.375l-.752.203s1.685-6.563 1.728-6.664c.042-.102 1.319-3.173 1.395-3.315.075-.14 2.964-4.653 2.964-4.653l1.703-1.057z"></path>

        <g>

            <path fill="#FFF" d="M23.998 18.392c.129.938-.639 1.856-1.711 2.055L2.642 24.034C1.57 24.23.599 23.628.472 22.69L.03 19.42c-.126-.938.64-1.855 1.711-2.054l19.646-3.588c1.072-.196 2.043.407 2.169 1.343l.442 3.271z"></path>

            <defs>

                <path id="e" d="M23.998 18.392c.129.938-.639 1.856-1.711 2.055L2.642 24.034C1.57 24.23.599 23.628.472 22.69L.03 19.42c-.126-.938.64-1.855 1.711-2.054l19.646-3.588c1.072-.196 2.043.407 2.169 1.343l.442 3.271z"></path>

            </defs>

            <clipPath id="f">

                <use xlink:href="#e" overflow="visible"></use>

            </clipPath>

            <path clip-path="url(#f)" fill="#BEBFBF" d="M1.018 17.24l2.461 4.173 3.975.304 5.279-1.54 4.397.103 3.415-1.289 3.866.774.263 1.948-23.72 3.485-1.182-2.866.203-4.642z"></path>

            <g>

            　　<defs>

                　　<path id="g" d="M23.998 18.392c.129.938-.639 1.856-1.711 2.055L2.642 24.034C1.57 24.23.599 23.628.472 22.69L.03 19.42c-.126-.938.64-1.855 1.711-2.054l19.646-3.588c1.072-.196 2.043.407 2.169 1.343l.442 3.271z"></path>

            　　</defs>

            　　<clipPath id="h">

                　　<use xlink:href="#g" overflow="visible"></use>

            　　</clipPath>

            　　<path clip-path="url(#h)" fill="#E7E7E8" d="M20.078 13.428l1.783 1.201.211 1.559.36 1.426-1.887 1.377 3.111.623 2.027-.111-.732-5.403-1.504-.921z"></path>

            </g>

        </g>

    </svg>

</body>

</html>

效果如下：

用svg绘制圣诞帽的更多相关文章

  1. 使用SVG绘制湖南地图

    项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...

  2. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

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

    一个简单的SVG绘制图片的小案例. 效果图: 代码如下: <style> * { ; ; } body { background-color: #d5d3d4; } .container ...

  4. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  5. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  6. svg绘制一个简单地饼图

    一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  7. 程序猿必备的10款超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...

  8. SVG绘制图形

    一.SVG介绍 1.SVG指可伸缩矢量图片 2.SVG用来定义用于网络的基于矢量的图形 3.SVG使用XML格式定义图形 4.SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 5.SVG是万维网 ...

  9. 使用SVG绘制流程图

    本篇主要记录流程图的实现过程中的难点和核心技术点,先上效果图: 节点可以任意拖拽,曲线跟随变化 正在连接的线 1.节点实现 流程图是基于SVG绘制的,节点主要利用 g 和 foreignObject的 ...

随机推荐

  1. angular $digest already in progress

    angular.js:11706 Error: [$rootScope:inprog] $digest already in progresshttp://errors.angularjs.org/1 ...

  2. 5、css补充

    css其余问题补充 本篇导航: 默认的高度和宽度问题 后台管理布局 css响应式布局 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> ...

  3. mui 打开外网链接返回的正姿势！

    我们的返回分两种: 一:按返回按钮只能返回上一页 二:向右滑动一步返回app的面页

  4. kettle 6.1 按时间循环增量抽取数据

    场景:假设有一张表数据量很大,需要按一个时间来循环增量抽取 方法:主要是通过JOB自身调用,实现循环调用,类似于 函数自调用 的循环. 1.JOB全图: 2.获取增量时间,并设置增量时间环境变量 3. ...

  5. C# ManualResetEventSlim 实现

    ManualResetEventSlim通过封装 ManualResetEvent提供了自旋等待和内核等待的组合.如果需要跨进程或者跨AppDomain的同步,那么就必须使用ManualResetEv ...

  6. spring rest 容易被忽视的后端服务 chunked 性能问题

    spring boot 容易被忽视的后端服务 chunked 性能问题 标签(空格分隔): springboot springmvc chunked 作者:王清培(Plen wang) 沪江Java资 ...

  7. Windows上的字符转换之CP_ACP和CP_OEMCP

    原文地址:http://blog.sina.com.cn/s/blog_53c1950a010158mw.html Windows API函数MultiByteToWideChar用于多字节编码字符串 ...

  8. go test 测试用例那些事

    go test命令,相信大家都不陌生,常见的情况会使用这个命令做单测试.基准测试和http测试.go test还是有很多flag 可以帮助我们做更多的分析,比如测试覆盖率,cpu分析,内存分析,也有很 ...

  9. spring拦截器中使用spring的自动注入

    需要在spring的拦截器中使用自定义的服务,这要就设计到将服务注入到拦截器中.网上看的情况有两种: 1. @Configuration public class OptPermissionHandl ...

  10. (6) MySQL慢查询日志的使用

    一. 设置方法 使用慢查询日志里捕获 启用之前需要先进行一些设置 方法一:全局变量设置 设置慢查询日志的日志文件位置 set global slow_query_log_file = "D: ...