今天是圣诞节，无意中看到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. GMA Round 1 相交

    传送门 相交 在实数范围内,设抛物线$C_1:y^2=2x$,双曲线:$C_2:\frac{y^2}{b^2}-\frac{x^2}{a^2}=1$(a,b为参数). 假如a和b都在(0,16)这个区 ...

  2. django之Ajax续

    接上篇随笔.继续介绍ajax的使用. 上篇友情连接:http://www.cnblogs.com/liluning/p/7831169.html 本篇导航: Ajax响应参数 csrf 跨站请求伪造 ...

  3. 35、concurrent.futures模块与协程

    concurrent.futures  —Launching parallel tasks    concurrent.futures模块同时提供了进程池和线程池,它是将来的使用趋势,同样我们之前学习 ...

  4. Docker卸载高版本重装低版本后启动提示：driver not supported

    解决方法: mv /var/lib/docker /var/lib/docker.old 其实就是docker镜像文件夹目录作怪,新版本的目录无法与旧版本目录相兼容. 不过建议降级的用户这样操作: y ...

  5. Java知识回顾 （8） 集合

    早在 Java 2 中之前,Java 就提供了特设类.比如:Dictionary, Vector, Stack, 和 Properties 这些类用来存储和操作对象组. 虽然这些类都非常有用,但是它们 ...

  6. Spring中Mybatis的花样配置 及 原理

    摘自: https://www.jianshu.com/p/fc23c94fc439

  7. CSS 小技巧(不定时更新)

    1.Web 文本中的省略号 在Web开发中,对于一种情况很常见.那就是,文本太长,而放置文本的容器不够长,而我们又不想让文本换行,所以,我们想使用省略号来解决这个问题.在今天HTML的标准中并没有相关 ...

  8. Android TextView中链接(link)点击事件的截取

    布局文件xml <TextView package com.jayce.testlink; import android.net.Uri; import android.os.Bundle; i ...

  9. html5学习笔记3——高级特性

    一:Web存储 数据以 键/值 对存在, web网页的数据只允许该网页访问使用. web存储有两种: localStorage - 没有时间限制的数据存储,存于浏览器缓存 sessionStorage ...

  10. 12C - PDB archive file

    在unplug一个pdb的时候,如果将扩展名定义为.pdb,oracle就会创建一个.pdb归档文件.包含pdb数据文件和xml元数据文件的压缩文件.创建archive file之后,就不用分开拷贝数 ...